Material-ui: `makeStyles` not receiving theme from `ThemeProvider`

[amypellegrini]

I'm trying to setup my own theme with different colours than those given by default. When I use makeStyles and try to reference the theme, the theme is not the one provided via ThemeProvider, but the default theme instead. The overall setup works fine for the components, I can change the font in Typography components, buttons, etc, but is not working when trying to access the theme inside makeStyles function.

I've read different guidelines and similar issues and so far I don't fully understand if there's something wrong with my setup or is this an actual bug.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When referencing the theme in makeStyles function, the theme is not the one provided via ThemeProvider, but the default material UI theme.

Expected Behavior 🤔

I would expect to be able to reference the custom theme provided via ThemeProvider when creating custom styles using makeStyles.

Steps to Reproduce 🕹

I created a codesandbox example where this behaviour is consistently reproduced:

https://codesandbox.io/s/material-ui-custom-theme-9r9qu?file=/src/App.tsx

Steps:

1. Notice the palette.primary.main colour value (#FF0000) defined in ThemeWrapper.tsx (codesandbox)
2. Now look at the customStyle class definition in App.tsx with custom textDecoration and color (color being referenced from theme)
3. In the codesandbox preview we can see that the text decoration is applied, but the color is the default from Material UI, not the one defined in the custom theme
4. We can also see how the font size override for Typography works as expected

Context 🔦

I'm trying to override default UI theme colors so that they can be referenced from any component consuming the custom theme. I know there may be alternative ways to do this in the context of the example provided (maybe using the color prop in Typography, and refer to the theme from the component props), but bare in mind this is a simplified example of an issue occurring in a larger codebase where the scenario is not exactly the same.

If this is not actually a bug and there is something missing in the setup, or a misuse of the currently supported API, then it would be good to document better its usage.

Your Environment 🌎

package.json relevant bits, as defined in the codesandbox example:

{
  ...
  "dependencies": {
    "@material-ui/core": "4.11.0",
    "@material-ui/styles": "4.10.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  },
  "devDependencies": {
    "@types/react": "16.9.19",
    "@types/react-dom": "16.9.5",
    "typescript": "3.7.5"
  },
  ...
}

Thanks!

[mnajdova]

@amypellegrini you are creating the classes outside of the context of the ThemeProvider, that is why you don't have access to the new color. I've updated the codesandbox to show how it should be define - https://codesandbox.io/s/material-ui-custom-theme-forked-z5mpp?file=/src/App.tsx

Let me know if this helps, or if there are any further questions.

[amypellegrini]

@mnajdova Ah! Ok, I can see why my example is not working now, it was not immediately obvious when I looked at your example though!

Thanks for the quick response!

[mnajdova]

Sure! Closing this one then :)