生产环境下Material UI致NextJS应用功能异常求助

1. 先搞定Material UI的SSR样式配置（Pages Router） #

如果你用的是Next.js的Pages Router，一定要正确配置_document.js，这是生产环境样式不生效的核心原因之一。Material UI在SSR时需要收集服务端渲染的样式，否则生产环境类名会被压缩混淆，导致Hidden组件的媒体查询失效，甚至影响事件绑定：

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@mui/material/styles';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="theme-color" content="#1976d2" />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};

2. App Router的同学看这里（Next.js 13+） #

如果是用App Router，记得在根布局加上'use client'指令，正确包裹ThemeProvider和CssBaseline，确保客户端能正确接管样式：

'use client';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const theme = createTheme();

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

3. 彻底避免类名压缩冲突 #

如果上面的配置还没解决问题，试试让Material UI用CSS变量替代动态类名，从根源上避免压缩混淆：

// 在你的theme配置里加上这一行
const theme = createTheme({
  cssVariablesRoot: ':root',
});

或者在next.config.js里禁用CSS类名的压缩：

module.exports = {
  compiler: {
    cssModules: {
      localsConvention: 'camelCase',
      exportLocalsConvention: 'camelCase',
    },
  },
};

4. 排查按钮点击失效的核心：Hydration不匹配 #

按钮onClick没反应，大概率是服务端渲染的内容和客户端hydrate的内容不一致，导致React无法正确绑定事件。你可以检查：

• 有没有在服务端代码里用window、document这类客户端API？一定要用typeof window !== 'undefined'做判断
• 有没有在服务端生成随机值、当前时间这类动态内容？这类内容要放到useEffect里在客户端初始化，避免服务端和客户端渲染结果不一样

5. 确认版本兼容性 #

最后，检查下你的依赖版本，确保Next.js和Material UI兼容：

• Next.js 13.x/14.x
• @mui/material ^5.14.0 以上
• @emotion/react ^11.11.0 以上
• @emotion/styled ^11.11.0 以上

我当时就是因为漏了_document.js的配置，导致生产环境下Material UI的样式没正确注入，Hidden组件始终隐藏，同时按钮因为样式覆盖（或者React事件绑定失败）点击没反应。按照上面的步骤调整后，两个问题都解决了！

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