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

Question

我正在使用 Material-UI 中的 Tabs、Tab 和 TabPanel，如 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 官方文档上的guide 以实现正确的行为。