Reactjs 使用Next.js和Material UI首次加载时未应用样式

我正在使用Material UI中的选项卡、选项卡和选项卡面板，如中所述。我将它与Next.js结合使用

这是迄今为止我删除了GraphQL/Apollo调用、下一个路由和内容的代码，以简化一点：

在Codesandbox上，它可以正确渲染。然而，在本地，在Chrome中，我有以下几点：

这位是检查员：

如果我再次单击Alice，然后单击Bob，现在一切看起来都很干净：

并且检查员看起来正确，因此对以下各项应用了填充：

我不明白为什么在第一次加载时不应用该样式

有什么建议吗

谢谢大家!

---

Benjamin

这可能是由于在Next.js中支持SSR服务器端渲染，因为material ui使用js进行样式设置，因此在加载js后，样式会加载到浏览器中，这是不可取的行为。我们需要事先计算样式，并在执行SSR时将这些样式注入页面。

---

您可以阅读Material ui的官方文档以实现正确的行为。

这可能是由于Next.js中支持SSR服务器端渲染，因为Material ui使用js进行样式设置，因此在加载js后在浏览器中加载样式，这是不可取的行为。我们需要事先计算样式，并在执行SSR时将这些样式注入页面。

---

您可以在物料界面的官方文档上阅读，以实现正确的行为。

谢谢，它解决了我的问题！谢谢，它解决了我的问题！