reactjs - 材质 UI 覆盖反应子树，某些组件除外

Question

有没有办法覆盖反应子树的主题，但跳过某些组件的覆盖？

我正在覆盖组件的所有子组件，确保所有字体都很小，使用：

const overrideTheme = (theme: Theme): Theme => {
   return createTheme({
     ...theme,
     typography: {
       fontSize: 11,
     }
   })
}

const MyCustomThemeWrapper = ({children}) => {
   return (
      <div>
         <ThemeProvider theme={overrideTheme}>
            {children}
         </ThemeProvider>
      </div>
   )
}

我想要做的是让这个覆盖排除某些组件（及其子组件）。特别是，我不想覆盖属于子树的任何Dialog组件的字体大小。children有什么办法可以做到这一点，而不必“重新覆盖”每个主题Dialog？即我想要这样的东西：

const Component1 = () => {
   return (
       <MyCustomThemeWrapper>
           <div>
              This text has fontSize 11
              <span> more font size 11</span>
              <Dialog open={open}>
                <DialogContent>
                   This text has the "original" fontSize
                </DialogContent>
              </Dialog>
           </div>
       </MyCustomThemeWrapper>
    )

}

其中自定义主题覆盖“命中”除子树MyCustomThemeWrapper之外的所有子项Dialog。我知道我在这里要求很多，但如果这是可能的，那就太好了。

标签： reactjsmaterial-ui

Answer 1

ThemeProvider您可以通过将另一个作为父级包装到内联组件来覆盖内联组件的样式。例如，如果您想Dialog从 override 中排除组件ThemeProvider，您应该用另一个包装它ThemeProvider。由于您的代码不够清晰，无法对其进行描述，因此我制作了另一个示例，该示例在该 inline checkboxs 样式中被另一个覆盖 ThemeProvider：

import React from "react";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";
import { green, orange } from "@material-ui/core/colors";

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

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

const CustomCheckBox = () => {
  return (
    <ThemeProvider theme={innerTheme}>
      <Checkbox defaultChecked />
    </ThemeProvider>
  );
};

export default function App() {
  return (
    <ThemeProvider theme={outerTheme}>
      <Checkbox defaultChecked />
      <Checkbox defaultChecked />
      <CustomCheckBox />
    </ThemeProvider>
  );
}

结果如下：