如何在React中同时为多个类应用样式？（附无效实现示例）

嘿，我明白你卡在哪了！在CSS里咱们习惯用逗号分隔选择器给多个类批量加样式，但Material-UI的withStyles是基于JavaScript对象来定义样式的，不能直接照搬CSS的写法——你原来的代码无效，就是因为root,active,icon...这种并列键的写法在JS对象里根本不合法。

下面给你两种实用的解决思路，都能实现你要的“多个类共享同一样式”的效果：

方法1：提取共享样式变量（最直观好维护） #

先把重复的样式抽成一个单独的变量，然后每个需要的类名都引用这个变量：

const StyledTableSortLabel = withStyles((theme) => {
  // 把要共享的样式单独定义出来
  const whiteTextStyle = {
    color: theme.palette.common.white,
  };

  return {
    root: whiteTextStyle,
    active: whiteTextStyle,
    icon: whiteTextStyle,
    iconDirectionDesc: whiteTextStyle,
    iconDirectionAsc: whiteTextStyle,
  };
})(TableSortLabel);

这种方式的好处是清晰易懂，之后要是想修改共享样式，只需要改whiteTextStyle这一处就行，维护起来特别方便。

方法2：用对象扩展/引用简化代码 #

如果有些类需要在共享样式基础上额外加专属样式，或者你想少写点重复代码，可以用对象扩展运算符，或者直接引用已定义的样式：

const StyledTableSortLabel = withStyles((theme) => {
  const baseStyle = { color: theme.palette.common.white };
  
  return {
    root: baseStyle,
    // 给active类额外加个字体加粗的样式
    active: { ...baseStyle, fontWeight: 'bold' },
    icon: baseStyle,
    iconDirectionDesc: baseStyle,
    iconDirectionAsc: baseStyle,
  };
})(TableSortLabel);

要是没有额外样式，直接icon: baseStyle也完全没问题，本质是让多个类指向同一个样式对象。

另外提一句，如果你用的是Material-UI v5及以上版本，更推荐用styled API来写样式，写法会更贴近咱们熟悉的CSS语法，但要是你坚持用withStyles，上面两种方法都能完美解决你的问题。

内容的提问来源于stack exchange，提问作者nemostyle