这是关于主题 MUI v5 的this 问题的后续问题。
虽然我的问题得到了解答，但我仍然难以理解@emotion/react API 的确切位置以及何时应该使用@mui/material/styles。
我读了migration guide，虽然这确实回答了一些“如何做”的问题，但我不了解大局。
什么时候使用 MUI 的样式，什么时候使用情感？为什么有两种造型解决方案？我应该使用 MUI 的 ThemeProvider 还是 Emotion 的？有什么区别？
对于有经验的用户来说，这些问题可能是微不足道的，但对于刚入门的人来说，这一切都需要接受和理解。
【问题讨论】：
标签： reactjs material-ui
MUI v5 使用情感作为默认样式引擎。 MUI 团队推荐styled/sx 自定义组件样式。在底层，它调用了styled() 函数from emotion（不要与MUI styled 混淆），这就是情感部分相关的地方。如果您使用 MUI，则无需关心 ThemeProvider 的情绪。
关于这 2 个提供者，它们唯一的共同点是名称和将主题对象注入孩子的能力。来自emotion 的ThemeProvider 可以接受任何theme 对象，并且从另一个答案here 中可以看出，它与MUI API 的集成并不好，因为它仅用于单独使用emotion。
MUI中的那个类型比较严格，框架中大部分MUI组件都使用，所以如果你改变MUI主题中的一个变量，很多MUI组件都会受到影响，如果你不这样做，它也有default theme'不提供。
因此，如果您只使用没有 MUI 的情感，并且想在孩子们之间分享一些风格，请使用情感的ThemeProvider。由于您使用的是 MUI，请忽略它，这里不相关。
【讨论】：
styled 不一样吗？所以问题是你在“不要与 MUI 风格混淆”中指的是哪个 MUI styled
styled() 函数和来自MUI 的styled 是不同的。 MUI 风格是情感风格的包装。有 2 个 MUI 风格的函数，一个来自 @mui/system，另一个来自 @mui/material，在调用情感之前做真正的工作。