[styles] Fix ThemeProvider requiring full theme (#18500)

mui · Nov 22, 2019 · 7653673 · 7653673
1 parent 197b69c
commit 7653673
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 38 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
@@ -1,19 +1,31 @@
 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');
 
  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={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>;
+}