reactjs - Material-UI 中的伪选择器 withStyles 不渲染到页面

这真的很奇怪。我需要向 ::before 和 ::after 添加 2 个伪选择器的元素。 ::before正在呈现到页面，但::after没有呈现。但是语法是一样的。

const styles = {
  Typography: {
    overflow: 'hidden',
    position: 'relative',
    lineHeight: '1.2em',
    height: '3.6em',
    textAlign: 'justify',
    marginRight: '-1em',
    paddingRight: '1em',
    '&:after': {
      content: 'test',
      position: 'absolute',
      right: 0,
      width: '1em',
      height: '1em',
      marginTop: '0.2em',
      backgroundColor: 'white'
    },
    '&:before': {
      content: "'...'",
      position: 'absolute',
      right: 0,
      bottom: 0,
    }
  }
}

这是它被应用到的元素:

<Typography component="p" className={classes.Typography}>
    {incident.incident_description}
</Typography>

最佳答案

内容的值必须为wrapped in quotes。

这样可以将其编译为带引号的正确CSS表示形式。

content: "'test'",

或者

content: '"test"',

关于reactjs - Material-UI 中的伪选择器 withStyles 不渲染到页面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53349900/