Material UI 嵌套主题提供程序与Styles HOC 中断

Posted 2023-04-14

技术标签:

【中文标题】Material UI 嵌套主题提供程序与Styles HOC 中断【英文标题】：Material UI nested theme providers breaks withStyles HOC 【发布时间】：2020-07-26 07:39:52 【问题描述】：

我有一个使用 Create React App 创建的 React 应用程序，我使用 @material-ui/core npm 包进行主题化。

为了自定义组件，我使用 MaterialUI 提供的 withStyles 高阶组件。

根据文档，它支持嵌套的 ThemeProviders https://material-ui.com/customization/theming/#nesting-the-theme。

但在子 ThemeProvider withStyles 内部不会应用类。

这是一个演示问题的基本应用程序 -> https://codesandbox.io/s/vibrant-tree-eh83d

ExampleComponent.tsx

import React,  FunctionComponent  from "react";
import 
  WithStyles,
  withStyles,
  createStyles,
  StepButton,
  Step,
  Stepper,
  Box
 from "@material-ui/core";

const styles = createStyles(
  button: 
    "& .MuiStepIcon-root.MuiStepIcon-active": 
      fill: "red"
    
  
);

interface Props extends WithStyles<typeof styles> 
  title: string;


const ExampleComponent: FunctionComponent<Props> = ( title, classes ) => 
  console.log(title, classes);
  return (
    <Box display="flex" alignItems="center">
      <span>title</span>
      <Stepper activeStep=0>
        <Step>
          <StepButton className=classes.button>Test</StepButton>;
        </Step>
      </Stepper>
    </Box>
  );
;

export default withStyles(styles)(ExampleComponent);

App.tsx

import * as React from "react";
import  ThemeProvider, createMuiTheme  from "@material-ui/core";
import ExampleComponent from "./ExampleComponent";

const theme = createMuiTheme();

function App() 
  return (
    <ThemeProvider theme=theme>
      <ExampleComponent title="Root" />
      <ThemeProvider theme=theme>
        <ExampleComponent title="Nested" />
      </ThemeProvider>
    </ThemeProvider>
  );


export default App;

在 ExampleComponent 中，我 console.log 生成的类对象。

我想使用嵌套的 ThemeProviders 并覆盖组件内的类，而不管 ThemeProvider 是什么。我错过了什么还是不可能？

【问题讨论】：

【参考方案1】：

当您使用嵌套主题时，您无法可靠地使用 Material-UI 的全局类名称（例如 .MuiStepIcon-root.MuiStepIcon-active）。在嵌套主题中，“Mui...”类名必须不同，以避免与***主题的 CSS 类冲突，因为嵌套主题会导致“Mui...”类的某些 CSS与众不同。

您可以使用以下语法来成功匹配嵌套主题中出现的 Mui 类名称的后缀版本：

const styles = createStyles(
  button: 
    '& [class*="MuiStepIcon-root"][class*="MuiStepIcon-active"]': 
      fill: "red"
    
  
);