问题描述
使用 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