Nextjs Material UI CSS 在首次访问时未正确加载答案

【问题标题】：Nextjs Material UI CSS not loading properly on first visitNextjs Material UI CSS 在首次访问时未正确加载
【发布时间】：2021-05-13 08:28:38
【问题描述】：

我正在使用 Nextjs 和 Material UI 并且 Material UI CSS 在第一页加载时无法正确加载，如图所示第一次访问时看起来像这样的错误

在页面转换后用正确的样式更正一个

（还有很多其他的例子，例如像标题固定位置的元素不在它们的位置等等......）

但是当我从一个页面转换到另一个页面甚至触发 setState 命令时，一切都会回到它的位置并应用 CSS。我认为这是因为服务器和客户端之间的类名不匹配我已经从this link 应用了_app 和_document，问题仍然存在。

所以对我来说只有一个选择，那就是将 Twitter 或 Instagram 之类的第一页加载到网站中，所以如果这是第一次访问，它会显示给用户，然后因为调用设置某些状态，所以一切都会正确显示.那么如何在 nextjs 中检测这是用户对网站的第一页访问并且我不想使用上下文提供程序，因为我必须将消费者添加到每个页面并且该网站有很多页面

对于这个问题是否有任何解决方法或解决方案我一直在寻找答案数周以来，我已经询问了 Material UI 的创建者，他们说随着一些即将到来的升级它会得到修复，但是在那之前我该怎么办？

【问题讨论】：

您是否设置了您的_document.js，就像您链接的示例存储库中的一样？你能分享你_document.js中的代码吗？
如果您没有设置它，这可能会有所帮助：stackoverflow.com/a/66089559/1870780.
你的答案，我已经做到了，这是我的 _document.js jsfiddle.net/SC0d3r/h4xbnoq7/1 和 _app.js jsfiddle.net/SC0d3r/49uv0jhs跨度>

标签： css reactjs material-ui next.js

【解决方案1】：

这么多天后，我注意到在我的 _document.js 文件中有

import { ServerStyleSheets } from "@material-ui/styles";

我改成

import { ServerStyleSheets } from "@material-ui/core/styles";

在应用 CSS 之后，我摆脱了闪烁的问题

【讨论】：