css-selectors - 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!

标签： css-selectorsmaterial-ui

Answer 1

我实际上找到了解决方案，就像在 2 个 CSS 选择器之间使用逗号一样简单：

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