Material-UI ThemeProvider 会全局覆盖样式，而不仅仅是包装组件

Question

我有一个带有多个 Material-UI 选择的 React 组件。现在我想覆盖 其中一个 的一些样式，所以我创建了一个主题，现在想通过 ThemeProvider 应用它。 我的问题是 ThemeProvider 会覆盖每个 Select 的样式，而不仅仅是它所包裹的样式。

在谷歌搜索时，我发现了很多问题，如何让 ThemeProvider 在全球范围内应用其覆盖，但这与我想要做的相反。 我希望 ThemeProvider 仅将其覆盖应用到它所环绕的组件。 在我的用例中使用 ThemeProvider 是否有更好的选择？如果是，它必须与基于类的组件一起使用（因为我在这里使用了一个）

显示我的问题的代码框：https://codesandbox.io/s/twilight-sun-vyl9i

我对 Material-UI 还很陌生，如果我做错了什么，请原谅我。

Answer 1

我在 V4 中遇到了同样的问题，不得不用另一种方式解决。

没有 theme 属性解决方案的父 <ThemeProvider> 无法与 Typescript 一起使用，因为需要 theme 属性。

如果有人需要使用 Typescript 的解决方案，我使用 StylesProvider 解决了它。通过使用不同的种子将每个ThemeProvider 包装在StyleProvider 中，您的主题将不再干扰StyleProvider 之外的任何其他组件。 像这样

import { ThemeProvider, StylesProvider } from '@material-ui/core/styles';
//...
 <StylesProvider generateClassName={generateClassName}>
      <ThemeProvider theme={theme}>
        <children>
      </ThemeProvider>
  </StylesProvider>

您需要创建一个 generateClassName 属性来传递：

import { createGenerateClassName } from '@material-ui/core';

const generateClassName = createGenerateClassName({
  seed: 'blue-select,
});

export default generateClassName;

Answer 2

好的，我自己找到了解决方案。根据这个 issue on the material-ui github ，有一个 v4 错误，多个 ThemeProviders 必须有一个父 ThemeProvider 元素。据他们说，它将在即将到来的v5 中修复。

所以我做了什么，我只是在我的<div className="App"> 周围包裹了一个<ThemeProvider>，而不给它一个theme 属性。