Material-ui: ThemeProvider doesn't apply theme to core components

[HaNdTriX]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

@material-ui/styles/ThemeProvider should apply the theme to mui core components.

Current Behavior 😯

@material-ui/styles/ThemeProvider doesn't apply the theme to mui core components.

Steps to Reproduce 🕹

https://codesandbox.io/s/pwm13wmj9j

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.8.1 |
| React | v16.7.0-alpha.2 |

Workaround

Use old and new ThemeProvider.

<MuiThemeProvider theme={theme}>
  <ThemeProvider theme={theme}>{children}</ThemeProvider>
</MuiThemeProvider>

[joshwooding]

You need to follow https://material-ui.com/css-in-js/basics/#migration-for-material-ui-core-users to be able to use @material-ui/styles with @material-ui/core

https://codesandbox.io/s/7z0y60v1m0

[MBach]

Hello @joshwooding
Actually I've tried your solution with bootstrap, like you did in your codesandbox. Unfortunately, I've tried to modify it, in order to mimic my App, with the following sample: https://codesandbox.io/s/mm4x6y5l58

But everything seems fine! In my environment, the exact same code is not loaded in the right order, so my overrides are pointless:

[HaNdTriX]

Solved by creating a bootstrap.js file:

import { install } from '@material-ui/styles'
install()

and importing this as soon as possible.

Docs: https://material-ui.com/css-in-js/basics/#migration-for-material-ui-core-users
Example: https://codesandbox.io/s/5k6qo87zkk

Thanks @joshwooding

[japrogramer]

@HaNdTriX example no longer works and im getting

Failed to compile

./src/index.js
Attempted import error: 'install' is not exported from '@material-ui/styles'.

This error occurred during the build time and cannot be dismissed.

[JonahGroendal]

I'm having the same issue on v4.2.1 but import { install } from '@material-ui/styles' no longer works and it's not in the documentation.

[joshwooding]

@JonahGroendal The bootstrap step is no longer needed with v4, plus we recommend using @material-ui/styles

[JonahGroendal]

Thanks. My issue was that @material-ui/core uses @material-ui/styles as a dependency and so I had two different instances of the same package. The fix was to reinstall both, installing @material-ui/styles before core so that the styles packages get deduped. It was a pretty subtle bug but the warning provided by material-ui led me to the fix.

[Dianna]

@JonahGroendal you saved the day

[markbauer1975]

@JonahGroendal you saved the day again.