React中如何使用Material UI合并多个外部makeStyle？

当前写法存在两个核心偏差，导致样式完全不生效：

• 对clsx的入参格式理解错误：useStyles返回的是自定义类名到生成的哈希类名的映射对象（结构为{ 你的类名: 生成的类名字符串 }），但clsx支持的对象类型入参是「类名到是否启用的布尔值」，直接把两个映射对象塞给clsx，不会按预期合并同名键的样式，反而会把自定义类名当成原生CSS类名，拼接出大量无效类名。
• 错把clsx的返回值当成类映射对象：clsx最终返回的是拼接完成的类名字符串，不存在modalContainer这类属性，写className.modalContainer取到的是undefined，自然不会应用任何样式。

根据你的使用场景，有两种常用的合并方式：

方案1：少量类直接按需合并（推荐） #

如果只是合并少数几个同名类，直接取两个hook返回的对应类名传给clsx即可，完全符合工具的设计语义：

import clsx from 'clsx';
import { Modal, Fade, Backdrop } from '@mui/material';
import useStyles from '../styles/style';
import useAddTaskStyles from '../styles/addTaskStyle';

// 正常调用两个样式hook，拿到类映射对象
const globalClasses = useStyles();
const addTaskClasses = useAddTaskStyles();

// 其他业务逻辑省略...

<Modal
  // 直接取两个映射对象下的同名modalContainer类，用clsx拼接
  className={clsx(
    globalClasses.modalContainer,
    addTaskClasses.modalContainer
  )}
  open={showAddTask}
  onClose={handleCloseAddTask}
  closeAfterTransition
  BackdropComponent={Backdrop}
  BackdropProps={{ timeout: 500 }}
>
  <Fade in={showAddTask}>
    <Tasks ref={useRef} />
  </Fade>
</Modal>

这种方式没有额外封装成本，类多的时候也可以按需传值，不会出现意外合并的问题。如果需要调整样式优先级，把优先级高的类放在clsx入参的最后一位即可，类名字符串靠后的CSS规则优先级更高。

方案2：封装通用合并方法，批量合并同键类 #

如果拆分的样式文件较多，不想一个个手动取同键类名，可以封装一个轻量的合并工具，把多个类映射对象合并成一个新对象，自动把同键的类名拼接好：

// 封装通用合并方法
const mergeMuiClasses = (...classObjs) => {
  // 收集所有样式对象的类名键
  const allKeys = [...new Set(
    classObjs.flatMap(obj => Object.keys(obj))
  )]
  // 把同键的类名用clsx拼接成最终的类字符串
  return allKeys.reduce((merged, key) => {
    merged[key] = clsx(...classObjs.map(obj => obj[key]))
    return merged
  }, {})
}

// 组件内使用
const globalClasses = useStyles();
const addTaskClasses = useAddTaskStyles();
// 合并完成后和直接用单个useStyles的写法完全一致
const classes = mergeMuiClasses(globalClasses, addTaskClasses);

<Modal
  className={classes.modalContainer}
  // 其他props保持不变
>

同样可以通过调整入参顺序控制样式优先级，优先级高的样式对象放在入参最后即可。

如果两个拆分的样式文件的类名本来就没有重复，完全不需要做合并操作，直接按需取对应类即可：

• 通用样式类从全局样式hook的返回值里取
• 组件特有的样式类从对应业务样式hook的返回值里取
  避免无意义的合并带来的调试成本。

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