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


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


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
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<App />
Is it correct to pass the same theme object to both providers?
Show previous messages

April 14, 2019 at 6:24pm
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.

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: <>
The core & styles versions need to match or you need to deduplicate the styles from your bundle.
Ah ok, thank you :-)

June 16, 2020 at 7:53am
i cannot overrride the height of materialui dropzone area is there any solution

October 27, 2020 at 4:30am
I'm new to react but have been spending a lot of time learning about the theme features. Thought I'd provide a default example that works for me. Keep in mind, i'm in Typescript, so you'll see me augmenting the base "CommonColors" interface in order to accept new colors under theme.palette.common definition....(not necessary if you're using normal JS).
Again, hope this helps someone...
Example implementation