MUI 5 React项目预渲染时样式标签不加载问题求助

核心原因 #

MUI5默认采用Emotion（CSS-in-JS方案），样式会在客户端动态注入到页面；而MUI4使用的JSS会在初始化时生成可见的<style>标签。Prerender.io的爬虫如果在动态样式注入完成前生成快照，就会导致预渲染页面缺失CSS。

解决办法 #

1. 适配Emotion服务端样式提取（推荐） #

通过@emotion/server提取组件样式并提前注入到页面，确保Prerender.io能抓取到完整样式：

• 安装依赖：

  npm install @emotion/server @emotion/react react-dom/server
  

• 修改public/index.html，添加样式占位符：

  <div id="root"></div>
  <style id="emotion-styles"></style>
  

• 修改src/index.js，在客户端渲染前提取并注入样式：

  import { render } from 'react-dom';
  import { renderToString } from 'react-dom/server';
  import { CacheProvider } from '@emotion/react';
  import createCache from '@emotion/cache';
  import { extractCritical } from '@emotion/server';
  import App from './App';
  
  const cache = createCache({ key: 'css' });
  // 服务端方式渲染App并提取关键样式
  const { styles } = extractCritical(
    renderToString(
      <CacheProvider value={cache}>
        <App />
      </CacheProvider>
    )
  );
  
  // 将提取的样式注入到页面占位符
  const styleElement = document.getElementById('emotion-styles');
  if (styleElement) styleElement.innerHTML = styles.css;
  
  // 正常渲染客户端应用
  render(
    <CacheProvider value={cache}>
      <App />
    </CacheProvider>,
    document.getElementById('root')
  );
  

2. 配置Prerender.io等待样式加载完成 #

在Prerender.io的自定义脚本中添加等待逻辑，确保爬虫等待样式注入完成后再生成快照：

// 等待Emotion动态样式标签出现
function waitForEmotionStyles() {
  return new Promise(resolve => {
    const check = () => {
      if (document.querySelectorAll('style[data-emotion]').length > 0) {
        resolve();
      } else {
        setTimeout(check, 100);
      }
    };
    check();
  });
}

// 执行等待后通知Prerender.io生成快照
waitForEmotionStyles().then(() => {
  window.prerenderReady = true;
});

也可以替换为等待特定组件样式生效的逻辑，比如判断某个MUI组件的计算样式不为默认值。

3. 备选：导出MUI5静态CSS #

如果不需要动态样式，可以生成静态CSS文件直接引入，适合组件固定的场景：

• 使用react-app-rewired修改CRA配置（避免eject）：

  npm install react-app-rewired @mui/styles mini-css-extract-plugin
  

• 创建config-overrides.js：

  const { override, addWebpackPlugin } = require('customize-cra');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = override(
    addWebpackPlugin(
      new MiniCssExtractPlugin({
        filename: 'static/css/mui-static.css',
      })
    )
  );
  

• 修改package.json启动脚本：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"
  }
  

• 在src/index.js配置静态类名生成：

  import { createTheme, ThemeProvider } from '@mui/material/styles';
  import { StylesProvider, createGenerateClassName } from '@mui/styles';
  
  const generateClassName = createGenerateClassName({
    productionPrefix: 'mui-static'
  });
  const theme = createTheme();
  
  render(
    <ThemeProvider theme={theme}>
      <StylesProvider generateClassName={generateClassName}>
        <App />
      </StylesProvider>
    </ThemeProvider>,
    document.getElementById('root')
  );
  

• 在public/index.html引入静态CSS：

  <link rel="stylesheet" href="%PUBLIC_URL%/static/css/mui-static.css">
  

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