mui 5 反应中没有样式标签

Question

我在React.js中构建了2个项目，一个使用material ui 4，另一个使用mui5。这两个网站都运行良好，样式也很完美。我注意到，在使用 Material ui 4 构建的项目中，我可以看到样式标签正在加载，而在使用 mui 5 和 CSS 构建的项目中，样式标签不存在。 PFB 截图。

我使用 pre-render.io 进行预渲染网站，由于使用 Material ui 5 构建的上述行为网站向机器人显示了正确的样式，而在 mui5 网站的情况下，没有为机器人加载 CSS。

MUI 5 项目：

Material UI 4 项目：

我已经按照他们网站上的文档使用了这两个材料版本。唯一的区别是 mui5 项目是使用 CRA 构建的，而 Material ui 4 项目是使用自定义 webpack 构建的。

如何在使用 prerender.io 预渲染的情况下加载 mui 5 样式

Answer 1

您可以缓存它，mui 文档建议这样做。

https://mui.com/material-ui/integrations/interoperability/#emotion

const emotionCache = createCache({
    key: 'css',
    container: document.head, // pointing to <iframe>.document in this case, ymmv
    prepend: true, // ymmv
    speedy: false // <--- key setting
  })

<CacheProvider value={emotionCache}>