Material-UI 生产构建生成与开发中不同的样式订单定义

如何解决Material-UI 生产构建生成与开发中不同的样式订单定义

使用 material-ui，生产版本与开发版本不同：生产版本中生成的 material-ui 样式的定义顺序与开发版本不同。

在 DEV 中，HTML head 标记按以下顺序包含 material-ui 样式：

• MuiPaper
• MuiTouchRipple
• MuiButtonBase
• MuiButton
• [...]

在 PROD 中，HTML head 标记按以下顺序包含 material-ui 样式：

• MuiButton
• MuiButtonBase
• MuiIcon
• MuiMenu
• [...]

所以在生产中，它打破了样式：material-ui 自己的样式相互覆盖...

更多上下文：

• Material-ui 用于 4.11.3 版本
• Parcel 用于进行生产构建
• 自定义 makeStyles 未使用（因此我不关心 https://stackoverflow.com/a/62646041/3790208 解决方案）
• 我尝试了此处描述的解决方案但没有成功：https://material-ui.com/getting-started/faq/#why-arent-my-components-rendering-correctly-in-production-builds => 我创建了一个 generateClassName 实例并将其传递给在组件树顶部使用的 StylesProvider（此解决方案没有效果）
• @material-ui/styles 未使用

我的问题：如何确保 material-ui 样式在开发和生产中以相同的方式呈现？

解决方法

解决方案其实是升级到Material-ui的v5：https://next.material-ui.com/guides/migration-v4/

根本问题似乎与 Material-ui v4 没有正确处理摇树有关：https://github.com/mui-org/material-ui/issues/16609