Material UI 嵌套主题提供程序与样式 HOC 中断 [英] Material UI nested theme providers breaks withStyles HOC

问题描述

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

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

根据文档，它支持嵌套的 ThemeProviders

相关答案:

• MUI 全局类名称的可靠性如何在 JSS 中?

I have a React application created with Create React App and I use the @material-ui/core npm package for theming.

To customize components I use the withStyles higher-order component provided by MaterialUI.

According to documentation it supports nested ThemeProviders https://material-ui.com/customization/theming/#nesting-the-theme.

But inside the child ThemeProvider withStyles won't apply classes.

Here is a basic application demonstrating the issue -> 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;

Inside the ExampleComponent I console.log the generated classes object.

I want to use nested ThemeProviders and override classes inside components regardless of the ThemeProvider. Am I missing something or is this not possible?

解决方案

When you are using nested themes, you cannot reliably use Material-UI's global class names (e.g. .MuiStepIcon-root.MuiStepIcon-active). Within a nested theme, the "Mui..." class names have to be different to avoid conflicting with the CSS classes for the top-level theme since the nested theme will cause some of the CSS for the "Mui..." classes to be different.

You can use the following syntax in order to successfully match the suffixed versions of the Mui class names that occur within nested themes:

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

Related answer:

• How reliable are MUI Global Class names in JSS?

这篇关于Material UI 嵌套主题提供程序与样式 HOC 中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！