React SSR搭配Material UI5时@emotion/cache的inserted对象为空问题

• 核心原因：Material UI 5默认使用独立的emotion缓存实例，缓存key为mui，你自定义的key: 'css'的缓存实例没有被MUI组件复用，导致MUI生成的样式没有写入你传入emotion server的缓存对象，因此inserted字段为空

步骤1：调整缓存配置 #

两种方案二选一即可：

方案A：直接修改缓存key和MUI默认值对齐 #

修改SSR缓存配置代码：

// 把key改成mui和MUI默认值匹配
let key = 'mui';
let serverCache = createCache({ key: key, prepend: true, speedy: false });

方案B：保留自定义key，后续显式注入缓存到MUI引擎 #

不用修改缓存key，继续用你原有key: 'css'的配置即可。

步骤2：补全ServerApp的Provider嵌套结构 #

你当前只配置了emotion的CacheProvider，缺少MUI的StyledEngineProvider来接管样式引擎，需要调整结构如下：

import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
// 替换为你实际的MUI主题配置路径
import theme from './theme';

<StyledEngineProvider injectFirst cache={serverCache}>
  <CacheProvider value={serverCache}>
    <ThemeProvider theme={theme}>
      <IntlProvider locale={config.locale} messages={localeMessages} textComponent="span">
        {/* 原有业务组件内容 */}
      </IntlProvider>
    </ThemeProvider>
  </CacheProvider>
</StyledEngineProvider>

参数说明：

• injectFirst：让MUI的样式优先级低于自定义的CSS/样式代码，避免业务样式被MUI默认样式覆盖
• cache={serverCache}：显式指定MUI使用你创建的缓存实例，所有MUI生成的样式都会写入该对象

步骤3：检查Babel配置兼容性 #

确保你的Babel配置满足以下要求：

1. 已经安装并配置了@emotion/babel-plugin，移除旧版的babel-plugin-styled-components、@mui/material的按需导入插件（MUI5原生支持Tree Shaking不需要额外的按需导入插件）
2. Babel插件配置参考：

{
  "plugins": [
    ["@emotion", {
      "autoLabel": "dev-only",
      "cssPropOptimization": true
    }]
  ]
}

步骤4：排查legacy样式库冲突 #

如果你使用了@mui/styles包提供的makeStyles/withStylesAPI，这部分样式是基于JSS生成的，不会写入emotion缓存，需要单独处理JSS的SSR逻辑，建议迁移到MUI5原生的sx属性、styledAPI来统一走emotion链路。

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