Material UI - 主题覆盖了错误的组件答案

【问题标题】：Material UI - Theme is overriding the wrong componentMaterial UI - 主题覆盖了错误的组件
【发布时间】：2021-07-06 11:49:42
【问题描述】：

我制作了两个 Material-UI 组件。两者都使用主题。但是，一个主题的覆盖正在另一个主题中使用！我正在想办法解决这个问题。代码如下：

这被用于组件 1：

const themeForComponent1 = createMuiTheme({
  overrides: {
    MuiInputLabel: {
      root: {
        padding: '13px 0 0 13px !important'
      }
    },
  },
})

...它正在更改组件 2 中的内容，该组件恰好也有一个具有“MuiInputLabel-root”类的元素。

（编辑：如果它有帮助，则在 Formik 中通过“as”属性使用 Field 元素调用组件。每个组件都使用自己的 ThemeProvider 元素。）

【问题讨论】：

你能显示代码吗？尤其是您在哪里定义 ThemeProvider？

标签： material-ui themes

【解决方案1】：

如果您想拥有两个独立的主题，您可以在此处查看 Material UI 文档 https://material-ui.com/styles/advanced/

但事实上你应该使用两个主题提供者。我说你应该使用唯一的主题并使用 Material UI 函数自定义组件样式，就像 CSS 类一样

【讨论】：

我不确定这是否是您的想法，但每个组件已经有自己的包装器。如果它有帮助，则在 Formik 中使用元素通过“as”属性调用组件。