From 5483f0e971454e571129f156c90fed4cdc99f4db Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 22 Nov 2019 13:12:12 +0100
Subject: [PATCH] [styles] Fix ThemeProvider requiring full theme

---
 .../components/DynamicThemeNesting.js         | 33 ++++++++---------
 .../components/DynamicThemeNesting.tsx        | 35 +++++++++----------
 .../src/ThemeProvider/ThemeProvider.d.ts      |  2 +-
 .../test/typescript/styles.spec.tsx           |  9 +++++
 4 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/docs/src/pages/customization/components/DynamicThemeNesting.js b/docs/src/pages/customization/components/DynamicThemeNesting.js
index bb92c2dd87cdaf..c2e4e3fd633f10 100644
--- a/docs/src/pages/customization/components/DynamicThemeNesting.js
+++ b/docs/src/pages/customization/components/DynamicThemeNesting.js
@@ -5,8 +5,6 @@ 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');
 
@@ -14,6 +12,20 @@ export default function DynamicThemeNesting() {
     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
index b53e7b69d4966a..a7de6b26c8820b 100644
--- a/docs/src/pages/customization/components/DynamicThemeNesting.tsx
+++ b/docs/src/pages/customization/components/DynamicThemeNesting.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import { createMuiTheme, ThemeProvider, Theme } from '@material-ui/core/styles';
 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');
 
@@ -14,6 +12,20 @@ export default function DynamicThemeNesting() {
     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={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
index 58a298daae5b9d..e0bbb10f1f3a90 100644
--- 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
index c732facb403533..c5c5073b1c72c4 100644
--- 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>;
+}