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

Question

使用 material-ui，生产构建与开发构建不同:生产中生成的 material-ui 样式的定义顺序与开发构建不同。

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

• MuiPaper
• MuiTouchRipple
• MuiButtonBase
• 多按钮
• [...]

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

• 多按钮
• MuiButtonBase
• 图标
• 多菜单
• [...]

因此在生产中，它打破了样式: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 样式在开发和生产中以相同的方式呈现？

Answer 1

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

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