[styles] Fix ThemeProvider requiring full theme

mui · Nov 22, 2019 · 108ce10 · 108ce10
1 parent 847feaa
commit 108ce10
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 37 deletions.
diff --git a/docs/src/pages/customization/components/DynamicThemeNesting.js b/docs/src/pages/customization/components/DynamicThemeNesting.js
@@ -5,15 +5,27 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import { blue } from '@material-ui/core/colors';
 import Switch from '@material-ui/core/Switch';
 
-const defaultTheme = createMuiTheme();
-
 export default function DynamicThemeNesting() {
   const [color, setColor] = React.useState('default');
 
   const handleChange = event => {
     setColor(event.target.checked ? 'blue' : 'default');
   };
 
+  const theme = React.useMemo(() => {
+    if (color === 'blue') {
+      return createMuiTheme({
+        palette: {
+          secondary: {
+            main: blue[500],
+            contrastText: '#fff',
+          },
+        },
+      });
+    }
+    return createMuiTheme();
+  }, [color]);
+
   return (
     <React.Fragment>
       <FormControlLabel
@@ -27,22 +39,7 @@ export default function DynamicThemeNesting() {
         }
         label="Blue"
       />
-      <ThemeProvider
-        theme={
-          color === 'blue'
-            ? {
-                ...defaultTheme,
-                palette: {
-                  ...defaultTheme.palette,
-                  secondary: {
-                    main: blue[500],
-                    contrastText: '#fff',
-                  },
-                },
-              }
-            : defaultTheme
-        }
-      >
+      <ThemeProvider theme={theme}>
         <Button variant="contained" color="secondary">
           {'Theme nesting'}
         </Button>

diff --git a/docs/src/pages/customization/components/DynamicThemeNesting.tsx b/docs/src/pages/customization/components/DynamicThemeNesting.tsx
@@ -5,15 +5,27 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import { blue } from '@material-ui/core/colors';
 import Switch from '@material-ui/core/Switch';
 
-const defaultTheme = createMuiTheme();
-
 export default function DynamicThemeNesting() {
   const [color, setColor] = React.useState('default');
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setColor(event.target.checked ? 'blue' : 'default');
   };
 
+  const theme = React.useMemo(() => {
+    if (color === 'blue') {
+      return createMuiTheme({
+        palette: {
+          secondary: {
+            main: blue[500],
+            contrastText: '#fff',
+          },
+        },
+      });
+    }
+    return createMuiTheme();
+  }, [color]);
+
   return (
     <React.Fragment>
       <FormControlLabel
@@ -27,22 +39,7 @@ export default function DynamicThemeNesting() {
         }
         label="Blue"
       />
-      <ThemeProvider
-        theme={
-          color === 'blue'
-            ? {
-                ...defaultTheme,
-                palette: {
-                  ...defaultTheme.palette,
-                  secondary: {
-                    main: blue[500],
-                    contrastText: '#fff',
-                  },
-                },
-              }
-            : defaultTheme
-        }
-      >
+      <ThemeProvider theme={theme}>
         <Button variant="contained" color="secondary">
           {'Theme nesting'}
         </Button>

diff --git a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.d.ts b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.d.ts
@@ -2,7 +2,7 @@ import { DefaultTheme } from '../defaultTheme';
 
 export interface ThemeProviderProps<Theme = DefaultTheme> {
   children: React.ReactNode;
-  theme: Theme | ((outerTheme: Theme) => Theme);
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
 }
 export default function ThemeProvider<T = DefaultTheme>(
   props: ThemeProviderProps<T>,

diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx
@@ -640,3 +640,12 @@ withStyles(theme =>
     };
   });
 }
+
+function themeProviderTest() {
+  <ThemeProvider theme={{ foo: 1 }}>{null}</ThemeProvider>;
+  // $ExpectError
+  <ThemeProvider<Theme> theme={{ foo: 1 }}>{null}</ThemeProvider>;
+  <ThemeProvider<Theme> theme={{ props: { MuiAppBar: { 'aria-atomic': 'true' } } }}>
+    {null}
+  </ThemeProvider>;
+}