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

Question

我正在使用Tabs,Tab和TabPanel来自 Material-UI ，如https://material-ui.com/components/tabs/ 中所述。我将它与 Next.js 结合使用。

这是我到目前为止的代码（我删除了 GraphQL/Apollo 调用、Next 路由和内容以简化一点）：https ://codesandbox.io/s/material-demo-6mq4g?file=/demo .js

在 Codesandbox 上，它可以正确呈现。但是，在本地，在 Chrome 中，我有以下内容：

这是检查员：

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

并且检查器看起来正确（填充相应地应用于<Box p={3}>）：

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

有什么建议吗？

谢谢！

本杰明

Answer 1

这可能是由于 Next.js 中的 SSR（服务器端渲染）支持，因为 material-ui 使用 JSS 进行样式设置，因此在加载 JS 后样式会加载到浏览器中，这是不理想的行为。我们需要预先计算样式，并在进行 SSR 时将这些样式注入页面。您可以阅读Material-ui 官方文档的指南以实现正确的行为。