Псевдоселектор в Material-UI со стилями, не отображаемыми на странице

Это действительно странно. Я элемент, к которому мне нужно добавить 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>

reactjs material-ui jss
person Jack Pilowsky    schedule 17.11.2018    source источник

Ответы (2)


arrow_upward
17
arrow_downward

Значение для контента должно быть обернуто в цитаты.

Это делает так, что он скомпилирован в правильное представление CSS с кавычками.

content: "'test'",

or 

content: '"test"',
person Oluwafemi Sule    schedule 17.11.2018

arrow_upward
1
arrow_downward

Вам нужно использовать как одинарные, так и двойные кавычки

content: "'test'"

or

content: '"test"'

Если вы хотите использовать переменную, вы можете использовать строку шаблона И кавычки

content: `'${yourVariable}'`

Также обязательно используйте двойное двоеточие :: после &

поэтому полный пример будет выглядеть так

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