生产中的Nextjs / nx Nrwl / Material UI样式最初存在渲染样式问题有人遇到过这个问题吗？

问题描述

我正在尝试使用下一个js插件和材料ui运行nx nrwl。

在我们的开发版本中一切正常，但是当我们为生产版本提供服务时，material-ui / styles会中断。我们在makeStyles中使用的所有类均未在第一个绘画中正确应用。

我已经使用了材料ui示例（https://github.com/mui-org/material-ui/tree/master/examples/nextjs），并且makeStyles类按预期工作。但是，当我使用nx nrwl next插件（​​https://www.npmjs.com/package/@nrwl/next）生成下一个项目并使用nx build-> nx serve --prod部署它时，它会破坏样式，直到导航到新页面。

看起来环境根据服务类型处理的样式不同。

我无法找到有关解决此问题的任何信息。是否有构建设置或我们应该设置的内容？谢谢！

仅在生产前油漆警告： 警告：道具className不匹配。服务器：“ jss1”客户端：“ HookGlobalStyles-grayTitle-1

Dev-样式选择器和类名称正确匹配

Dev构建屏幕截图

产品-样式选择器和类名称在首次渲染时不匹配

产品构建屏幕截图

解决方法

因此，问题在于设置了正确的生产变量：

我们使用package.json中的cross-env包使其工作：

“ prodBuild”：“跨环境NODE_ENV =生产nx运行api-server：build：production”，“ prodServe”：“跨环境NODE_ENV =生产nx运行api-server：serve：生产”