Pseudo Selector in Material-UI withStyles not rendering to page

user_1447849 0
Viewed 8035

This is really weird. I an element that I need to add 2 pseudo selectors to: ::before and ::after. ::before is rendering to the page, but ::after is not. But the syntax is the same.

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,
    }
  }
}

Here is the element that it is being applied to:

<Typography component="p" className={classes.Typography}> 
    {incident.incident_description}
</Typography>
jss material-ui reactjs
2 Answers

The value for content needs to be wrapped in quotes.

This makes so that it is compiled to the correct CSS representation with the quotes.

content: "'test'",

or 

content: '"test"',
user_51898110

You need to use both single and double quotes

content: "'test'"

or

content: '"test"'

If you want to use a variable you can use a template string AND quotes

content: `'${yourVariable}'`

Also be sure to use a double colon :: after &

so a full example would look like this

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