嵌套ThemeProvider覆盖主题样式定义

Question

我需要能够呈现一个组件，然后使用useEffects进行额外的呈现。在下面的代码中，组件提供了一个主题，每个useEffect呈现有自己主题的组件。

但最终，react呈现原始组件的样式会被第二个useEffect组件的主题覆盖。

使用此设置，如何在不泄漏样式的情况下将每个主题应用于其相应的组件？

使用React 17.0.2和material 4.12.4下面是相关代码：

import React from "react";
import ReactDOM from "react-dom";

import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

import orange from "@material-ui/core/colors/orange";
import green from "@material-ui/core/colors/green";
import Checkbox from "@material-ui/core/Checkbox";
import Person from "@material-ui/icons/Person";

const greenTheme = createTheme({
  palette: {
    secondary: {
      main: green[500]
    }
  }
});

const orangeTheme = createTheme({
  palette: {
    secondary: {
      main: orange[500]
    }
  }
});

function App() {
  React.useEffect(() => {
    const div = document.createElement("div");
    div.style.backgroundColor = "#ccc";

    ReactDOM.render(
      <ThemeProvider theme={greenTheme}>
        <CssBaseline />
        <div>
          <Checkbox defaultChecked />
          <Person color="secondary" />
        </div>
      </ThemeProvider>
      , div
    );

    document.getElementById("root").append(div);
  });

  React.useEffect(() => {
    const div = document.createElement("div");
    div.style.backgroundColor = "#ccc";

    ReactDOM.render(
      <ThemeProvider theme={orangeTheme}>
        <CssBaseline />
        <div>
          <Checkbox defaultChecked />
          <Person color="secondary" />
        </div>
      </ThemeProvider>
      , div
    );

    document.getElementById("root").append(div);
  });

  return (
    <ThemeProvider theme={greenTheme}>
      <CssBaseline />
      <Checkbox defaultChecked />
      <Person color="secondary" />
      <div>
        The color of above icon should be green but is getting overriden
      </div>
    </ThemeProvider>
  );
}

export default App;

​

​

Answer 1

你渲染内部效果的方式是非常奇怪的。我想不出你为什么要这么做。你能做些这样的事吗？

import React from "react";
import ReactDOM from "react-dom";

import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

import orange from "@material-ui/core/colors/orange";
import green from "@material-ui/core/colors/green";
import Checkbox from "@material-ui/core/Checkbox";
import Person from "@material-ui/icons/Person";

const greenTheme = createTheme({
  palette: {
    secondary: {
      main: green[500]
    }
  }
});

const orangeTheme = createTheme({
  palette: {
    secondary: {
      main: orange[500]
    }
  }
});

function Div1() {
  return (
    <div style={{backgroundColor: "#ccc"}}>
      <ThemeProvider theme={greenTheme}>
        <CssBaseline />
        <div>
          <Checkbox defaultChecked />
          <Person color="secondary" />
        </div>
      </ThemeProvider>
    </div>
  );
}

function Div2() {
  return (
    <div style={{backgroundColor: "#ccc"}}>
      <ThemeProvider theme={orangeTheme}>
        <CssBaseline />
        <div>
          <Checkbox defaultChecked />
          <Person color="secondary" />
        </div>
      </ThemeProvider>
    </div>
  );
}

function App() {
  return (
    <>
      <ThemeProvider theme={greenTheme}>
        <CssBaseline />
        <Checkbox defaultChecked />
        <Person color="secondary" />
        <div>
          The color of above icon should be green but is getting overriden
        </div>
      </ThemeProvider>
      <Div1 />
      <Div2 />
    </>
  );
}

export default App;

这样，每个div现在都是它自己的组件，您只需将它们呈现为正常。如果您希望它们作为应用程序组件中的ThemeProvider的同级元素，那么您可以在jsx中这样做。只需使用片段(<></>)确保函数只返回一个元素。

Answer 2

为了回答我自己的问题，在https://github.com/mui/material-ui/issues/15914中的评论之后，<ThemeProvider>应该被一个<StyleProvider>包围。

因此，有关守则将成为：

      <StylesProvider generateClassName={generateClassName("a")}>
        <ThemeProvider theme={orangeTheme}>
          <CssBaseline />
          <div>
            <Checkbox defaultChecked />
            <Person color="secondary" />
          </div>
        </ThemeProvider>
      </StylesProvider>,

现在，正确的颜色出现，没有风格泄漏。