MUI 中的 sx 样式是否会对 SEO 产生不良影响，即使我正在使用使用 SSR 渲染页面的 nextjs 12 应用程序

Question

我有一个 NextJs v12.3.0 应用程序，它在 MUI 中使用 sx 作为我的许多组件的样式。我的许多页面都呈现为 SSR。 现在我想知道一些事情。

1. MUI 是否将 sx 样式渲染为内联 css？
2. 如果是，对SEO有不好的影响吗？
3. 我该怎么做才能避免这种不良影响？
4. 其他库（例如 styled-components 或 css 模块）可以解决这个问题吗？

请帮助我找到问题的答案，并解决我在网站性能和 SEO 方面的困惑。

我刚刚测试了样式的许多方面，发现它们都将我的样式渲染为标签中的内联

Answer 1

1. 对于第一个问题，不是真的！ 使用 sx props ，您可以使用主题，它看起来像带有 sx props 的 MUI 系统，更改该特定组件的主题 2-对于第二个问题，MUI 在幕后使用实用程序类，您可以使用开发工具跟踪它们，MUI 使用实用程序类管理几乎所有事情，但您必须考虑到，使用 React 的 MUI 以及 React 本身对 SEO 并不友好！

2. 为了更好的SEO兼容性，我建议使用像Tailwind这样的框架，因为这个框架只能是开发依赖，而最终结果只是CSS，当然，为了更多的动画，你需要一些其他框架，比如motion，但是在动画MUI不太好

3. 但是如果像第一次初始化页面这样的事情，使用SSR，你的网站的SEO就可以了