Material UI override react subtree except for certain components - reactjs

Question

Is there a way to override the theme of a react sub-tree, but skip the override for certain components?
I'm overriding all children of a component, making sure all the font size is small, using:
const overrideTheme = (theme: Theme): Theme => {
return createTheme({
...theme,
typography: {
fontSize: 11,
}
})
}
const MyCustomThemeWrapper = ({children}) => {
return (
<div>
<ThemeProvider theme={overrideTheme}>
{children}
</ThemeProvider>
</div>
)
}
What I want to do is make this override exclude certain components (and their children). In particular, I don't want to override the font size of any Dialog components that's part of the children subtree. Any way I can do this, without having to "re-override" the theme for each Dialog? I.e. I want something this:
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>
)
}
where the custom theme override "hits" all the children of MyCustomThemeWrapper except for the Dialog subtree. I know I'm asking for much here, but would be really nice if this was possible.

Answer 1

You can override inline component's styles with wrapping another ThemeProvider as a parent to inline components. For instance, If you would like to except the Dialog component from override ThemeProvider, You should wrap it with another ThemeProvider. Because of your code wasn't clear enough to describing on it, I've made another example which in that inline checkboxs styles, override by another 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>
);
}
Here's the result: