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