How to group CSS selectors with Material-UI?

user_7810468 0
Viewed 214

I am wondering if there is a way to group CSS selectors with Material-UI to avoid repetition, from something like this:

const useStyles = makeStyles(() => ({
  root: {
    backgroundColor: '#000000',
    color: '#ffffff',
    '&::before': {
      content: '""',
      position: 'absolute',
      borderTop: '1px solid white',
    },
    '&::after': {
      content: '""',
      position: 'absolute',
      borderTop: '1px solid white',
    }
  },
}));

To something that would look more or less like this?

const useStyles = makeStyles(() => ({
  root: {
    backgroundColor: '#000000',
    color: '#ffffff',
    '&::before',
    '&::after': {
      content: '""',
      position: 'absolute',
      borderTop: '1px solid white',
    }
  },
}));

Thanks for your help!

material-ui css-selectors
1 Answers

I actually found the solution, it was as simple as using a comma between the 2 CSS selectors:

const useStyles = makeStyles(() => ({
  root: {
    backgroundColor: '#000000',
    color: '#ffffff',
    '&::before, &::after': {
      content: '""',
      position: 'absolute',
      borderTop: '1px solid white',
    }
  },
}));
user_78104680
Related