生产中 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?
我正在尝试 运行 使用下一个 js 插件和 material ui.
nx nrwl
在我们的开发 build 中一切正常，但是在我们为生产 build 提供服务时 material-ui/styles 中断。我们在 makeStyles 中使用的所有 classes 都没有在第一次绘制中正确应用。
我使用了 material ui 示例 (https://github.com/mui-org/material-ui/tree/master/examples/nextjs) and the makeStyles classes work as expected. But, when I generate a next project using the nx nrwl next plugin (https://www.npmjs.com/package/@nrwl/next) 并使用 nx build -> nx serve --prod 部署它破坏了样式直到我导航到新页面。
看起来环境根据服务类型处理不同的样式。
我找不到任何有关解决此问题的信息。是否有 build 设置或我们应该设置的任何内容？谢谢！
仅在产品首次绘制中出现警告：
警告：道具 className 不匹配。服务器：“jss1” 客户端：“HookGlobalStyles-grayTitle-1
Dev - 样式选择器和 class 名称正确匹配
Dev build 屏幕截图
Prod - 样式选择器和 class 名称在第一次渲染时不匹配
Prod build 屏幕截图
因此，问题在于设置了正确的生产变量：
我们在 package.json 中使用了 cross-env 包来让它工作：
"prodBuild": "cross-env NODE_ENV=production nx 运行 api-server:build:production", "prodServe": "cross-env NODE_ENV=production nx 运行 api-server:serve:production
我正在尝试 运行 使用下一个 js 插件和 material ui.
nx nrwl在我们的开发 build 中一切正常，但是在我们为生产 build 提供服务时 material-ui/styles 中断。我们在 makeStyles 中使用的所有 classes 都没有在第一次绘制中正确应用。
我使用了 material ui 示例 (https://github.com/mui-org/material-ui/tree/master/examples/nextjs) and the makeStyles classes work as expected. But, when I generate a next project using the nx nrwl next plugin (https://www.npmjs.com/package/@nrwl/next) 并使用 nx build -> nx serve --prod 部署它破坏了样式直到我导航到新页面。
看起来环境根据服务类型处理不同的样式。
我找不到任何有关解决此问题的信息。是否有 build 设置或我们应该设置的任何内容？谢谢！
仅在产品首次绘制中出现警告：
警告：道具 className 不匹配。服务器：“jss1” 客户端：“HookGlobalStyles-grayTitle-1
Dev - 样式选择器和 class 名称正确匹配
Dev build 屏幕截图
Prod - 样式选择器和 class 名称在第一次渲染时不匹配
Prod build 屏幕截图
因此，问题在于设置了正确的生产变量：
我们在 package.json 中使用了 cross-env 包来让它工作：
"prodBuild": "cross-env NODE_ENV=production nx 运行 api-server:build:production", "prodServe": "cross-env NODE_ENV=production nx 运行 api-server:serve:production