Nextjs / nx Nrwl / Material UI 样式在生产中的初始渲染样式问题。有没有人遇到过这个问题？
Posted
技术标签:
【中文标题】Nextjs / nx Nrwl / Material UI 样式在生产中的初始渲染样式问题。有没有人遇到过这个问题？【英文标题】：Initial render styling issue with Nextjs / nx Nrwl / Material UI styles in production. Has anyone run into this issue before? 【发布时间】：2021-02-11 08:00:45 【问题描述】：我正在尝试使用下一个 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 部署它时，它会破坏样式，直到我导航到新页面。
看起来环境根据服务类型处理不同的样式。
我找不到任何有关解决此问题的信息。是否有构建设置或我们应该设置的任何内容？谢谢！
仅在 prod 首次绘制时发出警告：
警告：道具className 不匹配。服务器：“jss1”客户端：“HookGlobalStyles-grayTitle-1
Dev - 样式选择器和类名正确匹配
开发构建屏幕截图
Prod - 样式选择器和类名在第一次渲染时不匹配
产品构建屏幕截图
【问题讨论】：
material UI 使用的 JSS 提供了一种方法来定义用于生成类名的函数。提供您自己的 JSS 实例并覆盖此函数以在服务器和浏览器上使用同一代。 Providing your own JSS class name generator to MUI 【参考方案1】：所以，问题在于设置正确的生产变量：
我们在 package.json 中使用了 cross-env 包来让它工作：
"prodBuild": "cross-env NODE_ENV=production nx run api-server:build:production", "prodServe": "cross-env NODE_ENV=production nx run api-server:serve:production"
【讨论】：
以上是关于Nextjs / nx Nrwl / Material UI 样式在生产中的初始渲染样式问题。有没有人遇到过这个问题？的主要内容，如果未能解决你的问题，请参考以下文章