NextJS+Emotion环境下Material-UI首次渲染样式失效求助

以下是针对性的排查和修复步骤，确保前端始终能加载样式：

• 检查Emotion缓存配置的一致性
  确保createEmotionCache.js里的缓存配置正确，prepend: true是关键——它能保证Material-UI的样式优先级高于自定义样式，避免被覆盖：

  import createCache from '@emotion/cache';
  
  export default function createEmotionCache() {
    return createCache({ key: 'mui-next', prepend: true });
  }
  

• 验证_app.js的缓存注入逻辑
  必须按正确顺序包裹组件：CacheProvider在外层，接着是ThemeProvider，同时确保客户端缓存正确传递：

  import { CacheProvider } from '@emotion/react';
  import { ThemeProvider, createTheme } from '@mui/material/styles';
  import CssBaseline from '@mui/material/CssBaseline';
  import createEmotionCache from '../src/createEmotionCache';
  
  const clientSideEmotionCache = createEmotionCache();
  const theme = createTheme();
  
  export default function MyApp(props) {
    const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
    return (
      <CacheProvider value={emotionCache}>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Component {...pageProps} />
        </ThemeProvider>
      </CacheProvider>
    );
  }
  

• 确认_document.js的服务端渲染配置
  服务端必须正确收集并注入样式，getInitialProps里的extractCriticalToChunks要正确处理渲染后的HTML，把提取的样式标签插入到<head>中：

  import * as React from 'react';
  import Document, { Html, Head, Main, NextScript } from 'next/document';
  import createEmotionServer from '@emotion/server/create-instance';
  import createEmotionCache from '../src/createEmotionCache';
  
  export default class MyDocument extends Document {
    render() {
      return (
        <Html lang="en">
          <Head>
            <link
              rel="stylesheet"
              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
            />
            {this.props.emotionStyleTags}
          </Head>
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      );
    }
  }
  
  MyDocument.getInitialProps = async (ctx) => {
    const originalRenderPage = ctx.renderPage;
    const cache = createEmotionCache();
    const { extractCriticalToChunks } = createEmotionServer(cache);
  
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => <App emotionCache={cache} {...props} />,
      });
  
    const initialProps = await Document.getInitialProps(ctx);
    const emotionStyles = extractCriticalToChunks(initialProps.html);
    const emotionStyleTags = emotionStyles.styles.map((style) => (
      <style
        data-emotion={`${style.key} ${style.ids.join(' ')}`}
        key={style.key}
        dangerouslySetInnerHTML={{ __html: style.css }}
      />
    ));
  
    return {
      ...initialProps,
      emotionStyleTags,
    };
  };
  

• 排查next.config.js的配置冲突

  • 不要禁用SSR，确保没有设置导致服务端渲染失效的配置
  • 避免自定义webpack配置干扰Emotion的样式处理，比如不要修改css-loader的默认行为
  • 确认reactStrictMode的设置不会引发冲突（一般开启StrictMode没问题，但如果有异常可以临时关闭测试）

• 额外检查点

  • 所有Material-UI组件都从@mui/material导入，不要混用旧版@material-ui/core包
  • 用无痕模式测试，清除浏览器缓存，避免缓存导致的样式加载异常
  • 查看浏览器控制台，排查是否有Emotion缓存初始化失败、样式注入错误等报错信息

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