Material ui FOUC在将@material ui/core与NextJS/React一起使用时

我的simple NextJS页面如下所示（可以在以下位置查看结果）：

/*eslint禁用未使用的变量*/
从“React”导入React，{PureComponent，Fragment}；
从“下一个/头”导入头；
从“重新组合/组合”导入组合；
从“../components/Layout”导入布局；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Button”导入按钮；
常量样式={
根目录：{
textAlign:'中心'，
paddingTop:200，
},
p:{
textTransform:'大写'，
颜色：“红色”，
},
};
类索引扩展了PureComponent{
render（）{
const{classes}=this.props；
const title=‘Proost项目’；
const description='这是主页的描述'；
返回(
{title}
amit
次要的
);
}
}
导出默认样式（样式）（索引）；

我正在从

@material ui/core

库中导入一组组件来设置我的项目样式。我还为

样式
常量指定了一个本地样式定义

这里发生的事情似乎是，我的样式没有在服务器上呈现，这就是为什么加载时提供的文件是sans样式的。然后CSS由客户端代码呈现。因此，会有一个几乎持续一秒钟的未格式化内容的闪现，其长度足以让人注意到

有办法解决这个问题吗？整个代码库供参考。
在尝试制作应用程序的生产版本时，我遇到了类似的问题，该应用程序使用了material ui。我通过添加一个类似以下的

import JssProvider from "react-jss/lib/JssProvider";

class App extends Component {
  render() {
    <JssProvider>
      *the rest of your material-ui components*
    </JssProvider>
  }
}

从“react jss/lib/JssProvider”导入JssProvider；
类应用程序扩展组件{
render（）{
*其余的材质ui组件*
}
}
这是解决方案-

基本上，您所需要做的就是将服务器端类名与客户端类名同步。上面的链接显示了修复该问题所需的操作。
如果您在应用程序加载时观察elements inspector，您可以看到它将MUI样式标记注入到应用程序中。我将讨论MUI如何使用JSS的配置。这是一个有趣的MUI文档信息页面，具体部分开始给出调整这方面性能的建议：我知道我的风格正在被注入到“部分”。但我的问题是这种注入只发生在客户端，而不是服务器上。这就是导致FOUC的原因。我需要一些方法来确保在推送页面之前将样式信息注入服务器。不，我从零开始使用NextJS进行构建。如果您不会对生产构建进行任何不同的配置，并且您使用
react create app
，创建了应用程序，我建议使用react-create应用程序的
react脚本构建
。我花了相当多的时间为此配置一个网页包，然后发现它已经附带了一个简单但有用的构建工具ootb你必须对每个页面都这样做吗？或者我可以用
将我的
和
元素包装在
\u document.jsx
中一次，然后在每个单独的页面（Index.jsx、about.jsx等）中忘记它吗？我有很多组件只加载在两个主要组件中，就像你一样。所以我只在这些主要的项目上使用它。我认为，如果您的所有组件都在
和
中被引用，只在它们上面引用，而忽略单个组件。至少这对我是有效的，我现在查看了您的代码，在您的情况下，您在同一
RootDocument
组件上使用它们。如果您使用的是更多材质ui样式的组件，则可以将
包装在
组件上，甚至包装在
根文档中
import JssProvider from "react-jss/lib/JssProvider";

class App extends Component {
  render() {
    <JssProvider>
      *the rest of your material-ui components*
    </JssProvider>
  }
}