MUI makeStyles如何基于传入props批量设置多组样式属性？

makeStyles 本身支持将单个类的样式配置直接声明为接收 props 的函数，返回完整的样式对象即可实现同条件样式聚合，无需为每个属性单独编写判断逻辑。

正确写法如下：

const useStyles = makeStyles((theme) => ({
  root: ({ isActive }) => {
    return {
      // 此处写所有场景通用的基础样式
      fontSize: "14px",
      padding: "8px 12px",
      // 条件样式：isActive 为 true 时批量合并对应样式
      ...(isActive && {
        color: "red",
        position: "fixed",
        top: "20px",
      })
    }
  }
}));

也可以简写为隐式返回的形式：

const useStyles = makeStyles((theme) => ({
  root: ({ isActive }) => ({
    fontSize: "14px",
    padding: "8px 12px",
    ...(isActive && {
      color: "red",
      position: "fixed",
      top: "20px",
    })
  })
}));

原有调用 useStyles 传参的方式不需要修改：

const classes = useStyles({ isActive });

如果存在多个判断条件，只需要叠加对应的对象展开逻辑即可：

root: ({ isActive, isDisabled }) => ({
  fontSize: "14px",
  ...(isActive && {
    // active 对应的样式集合
  }),
  ...(isDisabled && {
    // disabled 对应的样式集合
  }),
})

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