我在很多 Material UI 代码中看到他们在 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 
      } 
    } 
  }); 

然后一切都按预期进行