reactjs - 定义多种样式 React

Question

是否可以像在 CSS 中一样在 React 中定义多个类？

const useStyles = makeStyles((theme) => ({
  header1,
  header2,
  header3,
  header4: {
    display: 'flex',
    justifyContent: 'center',
  },
}));

Answer 1

我害怕@material-ui/styles库的使用不是那样的。您定义的对象中的每个键代表一个类名。

所以尝试做这样的事情:

const useStyles = makeStyles((theme) => ({
    'header1, header2, header3, header4': {
        display: 'flex',
        justifyContent: 'center'
    },
}));

当代码被编译成 CSS 时会导致不可用或无效的类名，因为库会尝试将 'header1, header2, header3, header4' 编译成一个类，并且由于名称包含空格字符，结果是垃圾。

为了解决您的问题，我能想到的最接近的方法是将样式对象定义为它自己的常量，然后将其分配给所需的键。您还可以使用 spread syntax 覆盖原始对象.像这样的东西:

const headerStyles = {
    display: 'flex',
    justifyContent: 'center'
};
const useStyles = makeStyles((theme) => ({
    header1: headerStyles,
    header2: headerStyles,
    header3: headerStyles,
    header4: {
        ...headerStyles,
        color: 'red'
    }
}));

我希望这对您来说是一个足够接近的妥协。