Material-UI withStyles 中的伪选择器未呈现到页面

Question

这真的很奇怪。我需要向一个元素添加 2 个伪选择器：::before 和 ::after。 ::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>

Answer 1

内容的值需要为 wrapped in quotes。

这使得它被编译为带有引号的正确 CSS 表示。

content: "'test'",

或

content: '"test"',

Answer 2

您需要同时使用单引号和双引号

content: "'test'"

或

content: '"test"'

如果您想使用变量，可以使用模板字符串和引号

content: `'${yourVariable}'`

另外一定要在&

之后使用双冒号::

所以一个完整的例子看起来像这样

const useStyles = makeStyles((theme) => {
  const yourVariable = 'test';
  return (
    yourStyle: {
      //...
      '&::before': {
      content:  `'${yourVariable}'`
    }
  )
})

Material-UI withStyles 中的伪选择器未呈现到页面

Pseudo Selector in Material-UI withStyles not rendering to page

reactjs

material-ui

jss