Material UI + Next.js 13生产环境样式失效问题求助

我用Material UI开发的应用在开发环境（DEV）里自定义样式正常，但生产环境（Prod）中自定义样式完全丢失。比如下面代码里的className={styles.customStyle}在生产环境被彻底忽略，开发环境却能正常工作：

<Typography className={styles.customStyle} component="h1">
  {t("Translation")}
</Typography>

请问需要做什么特殊配置或者其他操作吗？

我的配置信息如下：

• Node版本：v19.0.0
• package.json：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.0",
    "@mui/styles": "^5.11.1",
    "@next/font": "13.0.7",
    "@types/node": "^18.13.0",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "axios": "^1.2.1",
    "country-flag-icons": "^1.5.5",
    "eslint": "8.29.0",
    "eslint-config-next": "^13.1.1",
    "html-entities": "^2.3.3",
    "i18next": "^22.4.6",
    "json5": "^1.0.2",
    "next": "^13.1.1",
    "next-translate": "^1.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^12.1.1",
    "sass": "^1.57.0",
    "typescript": "4.9.4"
  }
}

• next.config.js：

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

针对Next.js 13 + Material UI生产环境样式丢失的问题，可尝试以下几种方案：

1. 适配App Router的JSS配置 #

你使用的@mui/styles依赖JSS，但Next.js 13的App Router（即开启的appDir: true）对JSS的服务端渲染支持有限，生产环境易出现样式未注入的情况。需在根布局中添加JssProvider并配置样式缓存：

// app/layout.tsx
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { JssProvider } from '@mui/styles';

const clientSideEmotionCache = createCache({ key: 'css' });
const theme = createTheme();

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

2. 调整Next.js生产环境样式优化 #

Next.js生产环境的CSS自动优化可能误过滤自定义样式，可修改next.config.js调整配置：

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
  // 确保CSS模块化导出规则正常
  cssModules: {
    exportLocalsConvention: 'camelCase',
  },
  // 可选：开启源映射方便调试样式问题
  productionBrowserSourceMaps: true,
};

module.exports = nextConfig;

3. 改用官方推荐的样式方案 #

放弃@mui/styles，改用Material UI官方推荐的Emotion styled API，适配性更好：

import styled from '@emotion/styled';
import Typography from '@mui/material/Typography';

const StyledTypography = styled(Typography)`
  /* 自定义样式 */
  color: #333;
  font-size: 2rem;
  font-weight: 600;
`;

// 使用组件
<StyledTypography component="h1">
  {t("Translation")}
</StyledTypography>

4. 检查样式导入规范 #

确保样式文件为模块化导入（如.module.scss/.module.css），避免被生产环境Tree Shaking移除：

// 正确的模块化导入方式
import styles from './your-styles.module.scss';

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