样式化 MUI 组件，但它的样式被传递的 ThemeProvider 覆盖

Question

我想默认设置自定义 React/MUI 组件的样式，但父 MUI ThemeProvider 仍然能够覆盖我的样式。

例如，假设我有一个默认为绿色的按钮（在我的代码中设置了样式），但它应该能够通过ThemeProvider 传递的默认主题覆盖颜色。

无论如何我似乎都找不到这样做，因为我在我的组件中应用的任何样式都成为默认样式，因为它是 CSS/样式树中的最后一个。

Answer 1

我无法在有关该主题的文档或 github 问题中找到太多信息 — 我只能告诉您如何应对这种情况以及它目前在 v5 中的工作方式。

似乎优先级如下：

sx > styled() > 主题

IE。 sx 具有最高优先级。

一开始你不能用你的主题覆盖某些东西似乎很奇怪，但另一方面你也希望能够偶尔用sx覆盖主题。所以对我来说，优先级是有道理的。

如果可能，您不应在主题中使用 !important，因为它会阻止 sx 和 styled() 完成其工作。

您要做的是运送无样式的可重用组件（没有styled() 或sx）并通过主题设置它们的样式。

在主题中执行着色。如果您不需要更改主题中的宽度、高度、边距和填充，您也可以通过styled() 和/或sx 进行定义。