Material-UI ThemeProvider 全局覆盖样式而不是只覆盖组件

Question

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

在谷歌搜索时，我发现了很多关于如何让 ThemeProvider 全局应用其覆盖的问题，但这与我正在尝试做的相反。 我希望 ThemeProvider 仅将其覆盖应用于它环绕的组件。 在我的用例中使用 ThemeProvider 有更好的替代方法吗？如果是，它必须与基于 class 的组件一起使用（因为我在这里使用一个）

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

我是 Material-UI 的新手，所以如果我做错了根本性的事情，请原谅我。

Answer 1

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

中修复

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

Answer 2

我在 V4 中遇到了同样的问题，不得不用其他方式解决它。

没有 theme prop 解决方案的父 <ThemeProvider> 不适用于 Typescript，因为 theme prop 是必需的。

如果有人需要适用于 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;

Material-UI ThemeProvider 全局覆盖样式而不是只覆盖组件

Material-UI ThemeProvider overwrites styles globally instead of only for wrapped components

reactjs

material-ui

themeprovider