时间戳

首页 > 解决方案 > Material-UI ThemeProvider 会全局覆盖样式，而不仅仅是包装组件

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

问题描述

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

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

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

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

标签： reactjsmaterial-uithemeprovider

解决方案

我在 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;

推荐阅读