init project

docs/data/material/customization/theming/ThemeNesting.js

@@ -0,0 +1,30 @@
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Checkbox from '@mui/material/Checkbox';
+import { green, orange } from '@mui/material/colors';
+
+const outerTheme = createTheme({
+  palette: {
+    primary: {
+      main: orange[500],
+    },
+  },
+});
+
+const innerTheme = createTheme({
+  palette: {
+    primary: {
+      main: green[500],
+    },
+  },
+});
+
+export default function ThemeNesting() {
+  return (
+    <ThemeProvider theme={outerTheme}>
+      <Checkbox defaultChecked />
+      <ThemeProvider theme={innerTheme}>
+        <Checkbox defaultChecked />
+      </ThemeProvider>
+    </ThemeProvider>
+  );
+}