Материал пользовательского интерфейса вложенных тем провайдеров разрывается со стилем HOC

Question

У меня есть приложение React, созданное с помощью Create React App, и я использую пакет @ material-ui / core npm для тем.

Для настройки компонентов я использую компонент высшего порядка withStyles, предоставляемый MaterialUI .

Согласно документации он поддерживает вложенные ThemeProviders https://material-ui.com/customization/theming/#nesting -the-theme .

Но внутри дочернего ThemeProvider withStyles классы применяться не будут.

Вот базовое c приложение, демонстрирующее проблему -> 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 I console.log сгенерированного объекта классов.

Я хочу использовать вложенные ThemeProviders и переопределять классы внутри компонентов независимо от ThemeProvider. Я что-то упустил или это невозможно?

Answer 1

Когда вы используете вложенные темы, вы не можете надежно использовать глобальные имена классов Material-UI (например, .MuiStepIcon-root.MuiStepIcon-active). В рамках вложенной темы имена классов «Mui ...» должны отличаться, чтобы избежать конфликта с CSS классами для темы верхнего уровня, поскольку вложенная тема вызовет некоторые из CSS для «Mui». .. "классы должны быть разными.

Вы можете использовать следующий синтаксис для успешного сопоставления суффиксных версий имен классов Mui, которые встречаются во вложенных темах:

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

Соответствующий ответ:

• Насколько надежны имена глобальных классов MUI в JSS?