2

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

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

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

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

4

2 回答 2

1

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

<ThemeProvider>没有prop 解决方案的父theme级不能与 Typescript 一起使用，因为themeprop 是必需的。

如果有人需要适用于 Typescript 的解决方案，我使用StylesProvider. 通过使用不同的种子将每个组件包装ThemeProvider在 aStyleProvider中，您的主题将不再干扰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;
于 2021-10-06T12:15:09.420 回答
-1

好的，我自己找到了解决方案。根据material-ui github上的this issue，有一个v4bug，multipleThemeProviders必须有一个父ThemeProvider元素。据他们说，它将在即将到来的修复v5。

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

于 2021-05-16T11:08:20.677 回答