使用Next.js & Material-UI [closed] 在第一次加载时没有应用样式。

Question

封闭. 这个问题需要 细节或清晰度. 目前不接受回答。

---

想改进这个问题？ 添加细节并澄清问题，通过 编辑本帖.

封闭 15天前.

改进这个问题

我用的是 Tabs, Tab 和 TabPanel 如上所述，从材料-UI中提取的 https:/material-ui.comcomponentstabs。. 我正在结合Next.js使用它。

这是我目前的代码（我去掉了GraphQLApollo调用，Next路由和内容，以简化一点）。https:/codesandbox.iosmaterial-demo-6mq4g?file=demo.js。

在Codesandbox上，它的渲染是正确的。然而，在本地，在Chrome浏览器中，我有以下内容。

这就是检查器 And this is the inspector:

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

而检查器看起来是正确的（padding被相应地应用到了 "爱丽丝 "和 "鲍勃 "上）。<Box p={3}>):

我不明白为什么第一次加载时没有应用样式。

有什么建议吗？

谢谢你的建议

本杰明

Answer 1

这可能是由于Next.js的SSR（Server Side Rendering）支持，因为material-ui使用JSS进行样式设计，所以样式会在JS加载后才在浏览器中加载，这不是理想的行为。我们需要事先计算好样式，并在做SSR时将这些样式注入到页面中。指南 在Material-ui的官方文档上实现正确的行为。