init project

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

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