How to group CSS selectors with Material-UI?

Question

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!

That's an interesting question. Since we're defining all styling using objects, your question is similar to asking whether multiple keys can share the same value in an object. Unfortunately, JS does not have this feature. You can [check out this post](https://stackoverflow.com/q/14743536/11067496). — AnsonH, Feb 24 '21 at 13:36

score 1 · Answer 1 · answered Feb 24 '21 at 14:32

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',
    }
  },
}));

How to group CSS selectors with Material-UI?

1 Answers1