Reactjs Nextjs css闪烁

我正在使用material ui和nextjs构建一个react应用程序。我正在使用

但是，在我通过
next build&&next export将其部署到生产环境之后，我开始体验到“闪烁”效果，大约1/3秒的时间，我的页面如下所示：


我猜这可能与nextjs在生产时将css导出到多个文件有关：



如何解决这个问题？
解决方案是创建一个自定义的
页面/\u document.js
页面，其中包含：

从“React”导入React；
//模块
从“next/Document”导入文档，{Html，Head，Main，NextScript}；
//梅芯
从“@material ui/core/styles”导入{ServerStyleSheets}；
类MyDocument扩展了文档{
render（）{
返回(
);
}
}
//`getInitialProps`属于`U文档`（而不是`U应用`），
//它与服务器端渲染（SSR）兼容。
MyDocument.getInitialProps=async（ctx）=>{
//决议顺序
//
//在服务器上：
//1.app.getInitialProps
//2.page.getInitialProps
//3.document.getInitialProps
//4.app.render
//5.page.render
//6.document.render
//
//在服务器上，出现以下错误：
//1.document.getInitialProps
//2.app.render
//3.page.render
//4.document.render
//
//论客户
//1.app.getInitialProps
//2.page.getInitialProps
//3.app.render
//4.page.render
//呈现应用程序和页面，并获取包含收集的副作用的页面上下文。
const sheets=新服务器样式表（）；
const originalRenderPage=ctx.renderPage；
ctx.renderPage=（）=>原始renderPage({
enhanceApp:（应用）=>（道具）=>sheets.collect（），
});
const initialProps=wait Document.getInitialProps（ctx）；
返回{
…初始道具，
//样式片段在应用程序和页面呈现完成后呈现。
风格：[
…反应。儿童。toArray（缩写词。风格），
sheets.getStyleElement（），
],
};
};
导出默认MyDocument；