CSS 带有 MUI 的伪选择器
CSS pseudo selectors with MUI
我在很多 MUI 代码中看到他们在他们的 React 样式组件中使用伪选择器。我以为我会尝试自己做,但我无法让它工作。我不确定我做错了什么,或者这是否可能。
我正在尝试制作一些 CSS 来抵消此元素对固定的 header。
import React from 'react';
import { createStyles, WithStyles, withStyles, Typography } from '@material-ui/core';
import { TypographyProps } from '@material-ui/core/Typography';
import GithubSlugger from 'github-slugger';
import Link from './link';
const styles = () =>
createStyles({
h: {
'&::before': {
content: 'some content',
display: 'block',
height: 60,
marginTop: -60
}
}
});
interface Props extends WithStyles<typeof styles>, TypographyProps {
children: string;
}
const AutolinkHeader = ({ classes, children, variant }: Props) => {
// I have to call new slugger here otherwise on a re-render it will append a 1
const slug = new GithubSlugger().slug(children);
return (
<Link to={`#${slug}`}>
<Typography classes={{ root: classes.h }} id={slug} variant={variant} children={children} />
</Link>
);
};
export default withStyles(styles)(AutolinkHeader);
我发现内容属性需要像这样用双引号引起来
const styles = () =>
createStyles({
h: {
'&::before': {
content: '"some content"',
display: 'block',
height: 60,
marginTop: -60
}
}
});
然后一切都按预期进行
正如@Eran Goldin 所说,检查 content
属性 的值并确保它设置为字符串 ""
。很有可能,你正在做这样的事情:
'&::before': {
content: '',
...
}
在输出样式表中根本没有设置 content
属性
.makeStyles-content-154:before {
content: ;
...
}
在Material-UI样式对象中,字符串内容为css值,包括双引号,以修复它只需写
'&::before': {
content: '""', // "''" will also work.
...
}
我在很多 MUI 代码中看到他们在他们的 React 样式组件中使用伪选择器。我以为我会尝试自己做,但我无法让它工作。我不确定我做错了什么,或者这是否可能。
我正在尝试制作一些 CSS 来抵消此元素对固定的 header。
import React from 'react';
import { createStyles, WithStyles, withStyles, Typography } from '@material-ui/core';
import { TypographyProps } from '@material-ui/core/Typography';
import GithubSlugger from 'github-slugger';
import Link from './link';
const styles = () =>
createStyles({
h: {
'&::before': {
content: 'some content',
display: 'block',
height: 60,
marginTop: -60
}
}
});
interface Props extends WithStyles<typeof styles>, TypographyProps {
children: string;
}
const AutolinkHeader = ({ classes, children, variant }: Props) => {
// I have to call new slugger here otherwise on a re-render it will append a 1
const slug = new GithubSlugger().slug(children);
return (
<Link to={`#${slug}`}>
<Typography classes={{ root: classes.h }} id={slug} variant={variant} children={children} />
</Link>
);
};
export default withStyles(styles)(AutolinkHeader);
我发现内容属性需要像这样用双引号引起来
const styles = () =>
createStyles({
h: {
'&::before': {
content: '"some content"',
display: 'block',
height: 60,
marginTop: -60
}
}
});
然后一切都按预期进行
正如@Eran Goldin 所说,检查 content
属性 的值并确保它设置为字符串 ""
。很有可能,你正在做这样的事情:
'&::before': {
content: '',
...
}
在输出样式表中根本没有设置 content
属性
.makeStyles-content-154:before {
content: ;
...
}
在Material-UI样式对象中,字符串内容为css值,包括双引号,以修复它只需写
'&::before': {
content: '""', // "''" will also work.
...
}