withStyles theme being override by default theme

devpeerapong commented 5 years ago

[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 🤔

withStyles(theme => {}) use theme that I provide from <ThemeProvider>

Current Behavior 😯

withStyles use default theme

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/71vo9yxvp6

Simply change the App variable to WithStylesThemeBeingOverrideByDefault or CorrectTheme to see the different.

The top box is styled using withStyles The bottom box is styled using useTheme to get the theme color and set the style directly

Context 🔦

I am trying to style the background color with withStyles but the background color always be blue. but if I useTheme() to get the theme.palette.primary.main, It is the correct color. so In order to get the withStyles to use the correct theme color, I have to wrap the App with MuiThemeProvider so It becomes like this

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

Your Environment 🌎

Tech	Version
@material-ui/core	v3.9.1
@material-ui/styles	v3.0.0-alpha.9
react & react-dom	16.8.0-alpha.1

oliviertassinari commented 5 years ago

@devpeerapong Please, don't use the two styling solutions at the same time (@material-ui/core/styles and @material-ui/styles). Don't miss this step: https://material-ui.com/css-in-js/basics/#migration-for-material-ui-core-users.

chroth7 commented 5 years ago

@oliviertassinari FWIW, I have the same issue as described above, and here is what I observe:

I use the new makeStyles Hooks API, all works well. For instance, I can use theme when using makeStyles. When I log out the theme to the console, I see that the custom fontFamily for instance has properly been set.
When I use Typography, though, I get the default font family, not my custom choice
If I set the fontFamily explicitly from theme for a class and apply it to the Typography component, it works
interestingly, in Storybook I have (to my understanding) the same setup, and there I get the correct FontFamily by default.

Also, I have the same problem when, for example, I do something <Typography color="primary">... which uses the default primary color, not the primary color of my theme.

As soon as I wrap my full app with both the new ThemeProvider as well as the old MuiThemeProvider as OP above, it works.

And, as I said, storybook works consistently (thus, I guess my theme is fine).

I am including install as above (even in its own file), I did remove pretty much everything from my component, it does not help. I am stumped.

Theme (typography part):

export const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
    fontFamily: "MyCustomFontThatWorksInStorybook",
    htmlFontSize: 16,
  }, ...

(also, using Typescript, and it all checks out)

"@material-ui/core": "^3.9.2", "@material-ui/styles": "^3.0.0-alpha.10" react/react-dom 16.8.3 (create-react-app based install)

mui / material-ui