Next.js集成Material UI时如何避免服务端页面的类定义重复

问题根因 #

你遇到的重复样式问题本质是JSS样式注入逻辑重复执行：如果你在每个调用样式的组件内都单独执行makeStyles(styles)或withStyles(styles)，每次调用都会生成独立的JSS样式实例，服务端渲染时每个组件实例都会触发一次样式注入，最终就会出现多份完全相同的样式定义。你之前用的全局类名方案只是去掉了类名后缀，没有解决重复注入的核心问题。

解决方案 #

方案1：复用样式钩子/高阶组件（最常用） #

不要在每个业务组件内单独初始化样式，把makeStyles或withStyles的调用统一放在公共样式文件中，全局仅执行一次，所有组件复用生成的钩子或高阶组件即可。
示例代码：

// styles.ts 调整后写法
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'

const styles = (theme: Theme) => createStyles({
  myButton: {
    '&:hover': { color: '#ff0' },
    '&.active': { color: '#f00' },
    fontSize: '1.23rem'
  }
})

// 全局仅执行一次makeStyles，生成统一的样式钩子
export const useCommonStyles = makeStyles(styles, { 
  name: 'CommonStyle', // 固定类名前缀，避免生成随机标识
})

业务组件调用示例：

// 任意业务组件
import { useCommonStyles } from './styles.ts'

export default function MyButton() {
  const classes = useCommonStyles()
  return <button className={classes.myButton}>按钮</button>
}

如果你使用HOC模式，同理仅生成一次高阶组件复用：

// styles.ts  HOC模式写法
export const withCommonStyles = withStyles(styles, { name: 'CommonStyle' })

组件调用：

function MyButton(props) {
  return <button className={props.classes.myButton}>按钮</button>
}
// 复用公共HOC，不要单独执行withStyles(styles)
export default withCommonStyles(MyButton)

方案2：全局样式仅注入一次 #

如果需要使用全局类名，不要在每个组件的样式规则里定义@global，而是全局仅注入一次全局样式：你可以在根组件_app.tsx中仅调用一次带全局样式的钩子，或者在_document.tsx中注入全局样式，避免多组件重复注入全局规则。

方案3：检查SSR配置 #

确认Next.js的服务端渲染配置符合MUI规范，不要重复收集样式：确保_document.tsx中每个请求仅初始化一次ServerStyleSheet，收集完所有组件样式后统一注入到页面head，不要在单个组件中单独插入样式到服务端生成的HTML中。

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