Next.js中使用MUI的makeStyles出现JSS/CSS类名冲突问题

API 探路者

2026-10-1

问题原因说明

这个问题既不是makeStyles的原生bug，也不是Next.js框架本身的缺陷，是SSR场景下JSS的默认类名生成规则和Next.js的渲染特性共同导致的冲突：

MUI v4及更早版本的makeStyles默认采用基于挂载顺序计数的类名生成逻辑，类名格式固定为jss[序号]，服务端和客户端渲染时如果组件挂载顺序不一致，就会出现类名序号错位
Next.js的按需渲染、动态导入特性会导致不同路由下组件的加载顺序不固定，JSS的计数基准会随场景变化，不同组件的样式定义就有可能被分配到同一个序号，最终出现不同类定义生成相同jssxxx类名的问题。

修复方案

给makeStyles传入唯一的name参数，为每个组件的样式指定独立命名空间，生成的类名会变为[name]-[规则名]-[序号]格式，从根源避免跨组件冲突，示例用法：

// 组件1的样式定义
const useStyles = makeStyles({
  customClass1: { padding: 10 }
}, { name: 'Comp1' })

// 组件2的样式定义
const useStyles = makeStyles({
  customClass2: { margin: 10 }
}, { name: 'Comp2' })

如果使用的是MUI v5及以上版本，直接替换makeStyles为官方推荐的styled API或者tss-react方案即可，v5已经废弃JSS作为默认样式方案，不会再出现这类类名冲突问题。
仍在使用MUI v4的项目也可以自定义全局JSS类名生成器，修改类名生成规则，取消对挂载顺序计数的依赖。