menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Material-UI

⚠️ Our spectrum channel is now disabled, use StackOverflow instead

Channels
Team

MuiThemeProvider vs ThemeProvider

February 21, 2019 at 3:31pm
The Material-UI community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

MuiThemeProvider vs ThemeProvider

February 21, 2019 at 3:31pm
Hello. I am a newbie for Material UI. I am wondering what is the best practice to use both theme providers. As I understand, I have to supply a theme to MuiThemeProvider to apply the theme to framework's components like Button, Card, etc. And I have to supply a theme to ThemeProvider in order to have it available when I create custom components
I am doing this in my project
const theme = createMuiTheme({
typography: {
useNextVariants: true
}
});
ReactDOM.render(
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</MuiThemeProvider>,
document.getElementById('root')
);
Is it correct to pass the same theme object to both providers?

February 21, 2019 at 4:10pm
If I'm not mistaken you either use MuiThemeProvider if you're using the "old" withStyles HOC. If you're using the new makeStyles hook you should use the ThemeProvider. If you're using ThemeProvider don't forget to run install() at the root of your app. So it depends on which theming method you want to use, though there is no harm in passing it to both providers (afaik).
Edited
Thanks for your reply. Without MuiThemeProvider, how can I customize the overall look of the app? For example, the palette. The code below doesn't turn my app into blue. Using MuiThemeProvider, it does
const theme = createMuiTheme({
palette: {
primary: blue
}
});
const App = () => (
<ThemeProvider theme={theme}>
<CssBaseline />
<Home />
</ThemeProvider>
);
Edited
Did you call install() as noted?
Edited
Oh, sorry. I really missed that part. Now, my code is like this
const muiTheme = createMuiTheme({
palette: {
primary: blue
}
});
const theme = {
...muiTheme
// custom styles
};
ReactDOM.render(
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>,
document.getElementById('root')
);
Happy that I only need one provider. Anyway, createMuiTheme is still required to provide default theme. Is this kind of function available in /styles?
Nope afaik you should still use createMuiTheme from the core package for now!
Thank you This thing is in my head all day. It is cleared now :D
like-fill
1

February 22, 2019 at 5:54pm
can you link me to info about the install() func? I'm looking in the docs and don't see anything about that
sure, there's not much about it for the moment though since it's part of the alpha styling system - here
Thanks - I should have read this guide more carefully when I started my greenfield 4.0.0 project

March 23, 2019 at 4:20am
I'm still having trouble with the install function. Do you have a working example?

March 24, 2019 at 11:56am
If you are using the latest version of the alpha you no longer need to perform the install() step. If you are using a version that still needs it you can find the information here : https://material-ui.com/css-in-js/basics/#migration-for-material-ui-core-users
like-fill
2

April 14, 2019 at 5:39pm
I am able to access the theme via useTheme + <ThemeProvider theme={theme}> (i.e. in sub-components), BUT I am not able to overwrite the default theme, despite wrapping my App as follows:
import App from './App';
import theme from './theme';
import ThemeProvider from '@material-ui/styles/ThemeProvider';
ReactDOM.render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>,
document.getElementById('root')
);
Is the new <ThemeProvider theme={theme}> intended to globally set the theme? I am on /[email protected].
It's also worth mentioning that the install() function is no longer exported from styles, despite the suggest above (about 1 month ago).
Edited
The ThemeProvider is intended to control its sub-components theme. Could you provide a minimal reproducible example?
OK - so when running on /[email protected] with /[email protected] (4.0.0-alpha-7), the theme is not respected. With a major version release I am guessing you are aware of the lack of backwards compatibility. Let me know if not, and I can send you a MRE.
Edited

April 15, 2019 at 2:45pm
If you want to use core v3 and styles v4 at the same time, you have to duplicate the theme provider: /MuiThemeProvider of v3 and the /ThemeProvider of v4.

July 1, 2019 at 9:03pm
I'm also having an issue getting a custom theme to work. I'm running: /core 4.1.0 /styles 4.1.1 I have a theme.js file set up and imported into the index.tsx of my project. I'm seeing styles from the default theme rather than the theme that I set up and imported. Here's a link to the project: <https://github.com/erichodges/IEX-Client/blob/master/src/index.tsx>
The core & styles versions need to match or you need to deduplicate the styles from your bundle.
Edited
Ah ok, thank you :-)
Show more messages