为何修改Material-UI导入顺序可修复样式异常，是预期行为吗？

问题产生原因 #

• @material-ui/core（MUI v4）采用运行时CSS注入的样式方案，样式最终的优先级和组件模块的加载顺序直接相关。
• 你混用了两种导入方式：从根入口@material-ui/core批量导入其他组件，单独从子路径入口@material-ui/core/Card导入Card组件。如果打包工具的模块去重逻辑有异常，或者项目node_modules中存在多份@material-ui/core副本，两种入口导入的组件会来自不同的模块实例，样式的注入顺序和预期不一致，打乱了MUI原本的样式覆盖逻辑，就会出现样式异常。

是否为MUI预期行为 #

• 该现象不属于MUI的设计预期，属于导入规范不统一+打包工具处理共同导致的问题。
• MUI官方一直推荐统一从根入口导入所有组件，现在主流打包工具（webpack、rollup、vite）都支持对ES module的tree shaking，统一从根入口导入不会引入冗余代码，还能规避这类样式异常问题。
• 如果你后续升级到MUI v5及以上版本，由于默认切换为Emotion作为样式方案，这类导入导致的样式错乱问题会大幅减少，但仍推荐遵循统一根入口导入的规范。

内容的提问来源于stack exchange，提问作者picklepick