Skip to content

Commit

Permalink
[styles] Fix ThemeProvider requiring full theme
Browse files Browse the repository at this point in the history
  • Loading branch information
eps1lon committed Nov 22, 2019
1 parent 847feaa commit 108ce10
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 37 deletions.
33 changes: 15 additions & 18 deletions docs/src/pages/customization/components/DynamicThemeNesting.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
33 changes: 15 additions & 18 deletions docs/src/pages/customization/components/DynamicThemeNesting.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>,
Expand Down
9 changes: 9 additions & 0 deletions packages/material-ui/test/typescript/styles.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
}

0 comments on commit 108ce10

Please sign in to comment.