css pseudo selectors with material-ui css pseudo selectors with material-ui reactjs reactjs

css pseudo selectors with material-ui


I found out that the content attribute needed to be double quoted like this

const styles = () =>  createStyles({    h: {      '&::before': {        content: '"some content"',        display: 'block',        height: 60,        marginTop: -60      }    }  });

and then everything worked like expected


As @Eran Goldin said, check the value of your content property and make sure it's set to a string "". Odds are, you are doing something like this:

'&::before': {  content: '',  ...}

Which doesn't set the content property at all in the output stylesheet

.makeStyles-content-154:before {  content: ;  ...}

In Material-UI style object, the content of the string is the css value, including the double quote, to fix it simply write

'&::before': {  content: '""', // "''" will also work.  ...}