css - 如何使用 Material UI 一次将相同的样式应用于多个类？

Question

我希望两个具有不同名称的类在 CSS 中具有相同的属性。我不想重复代码。我正在使用 Material UI，我想做这样的事情：

import { makeStyles, Theme } from '@material-ui/core/styles'
import { FONTS } from '~/src/theme/fonts'

export const useStyles = makeStyles((theme: Theme) => ({
tab: {
    fontSize: 24,
    fontFamily: FONTS.FuturaLT.FuturaLT,
    '&:nth-child(2)', '&:nth-child(3)': {
      paddingLeft: 0,
      paddingRight: 0,
      '& span': {
        paddingLeft: theme.spacing(4.5),
        paddingRight: theme.spacing(4.5),
        borderLeftStyle: 'solid',
        borderRightStyle: 'solid',
        borderColor: COLORS.grey,
        borderLeftWidth: 1,
        borderRightWidth: 1,
      },
    },
  },
}))

标签： cssmaterial-ui

Answer 1

您可以使用 CSS 预处理器，例如您拥有的 SASS/SCSS@extend

所以

.red {
  background-color: red;
}

.new-bloc {
  @extend .red;
  padding: 1rem;
}

会给你

.red, .new-bloc {
  background-color: red;
}

.new-bloc {
  padding: 1rem;
}