[styles] makeStyles not working with theme

[Azteker]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I just migrated from v4 to v5. My code is exactly same as in https://mui.com/styles/api/#makestyles-styles-options-hook

import { createStyles, makeStyles } from '@mui/styles';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      backgroundColor: theme.palette.red,
    },
  }),
);

const theme = createTheme();

export default function MyComponent() {
  const classes = useStyles();
  return (
    <ThemeProvider theme={theme}>
      <div className={classes.root} />
    </ThemeProvider>
  );
}

However, the theme passed to makeStyles is just an empty object {}. it also reports

MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.

Expected behavior 🤔

makeStyles should have the current theme passed in

Steps to reproduce 🕹

Steps:

1. 2. 3. 4.

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[chwallen]

This is documented in the migration guide:

https://mui.com/guides/migration-v4/#themeprovider-setup

It is also explained in the same guide why:

https://mui.com/guides/migration-v4/#mui-styles

I assume that the example has not been properly updated for v5, or I am missing something.

[rosaldo260]

I'm experiencing the same issue with "@mui/material": "^5.4.1",.

Everyting works with "@mui/material": "^5.4.0",.

[Forfold]

I'm also experiencing this, while using ThemeProvider at the top level from @mui/material/styles as recommended for v5. Will add info if I figure out a fix this morning.

Edit: Updating styles as well to "@mui/styles": "5.4.2", seemed to fix the issue. Can't just update @mui/material past 5.3.1 on its own I guess.

[dwjohnston]

This is documented in the migration guide:

https://mui.com/guides/migration-v4/#themeprovider-setup

I think it might be helpful to emphasise that including a theme provider should be required for tests too.

I have a simple repro this migration issue here:

https://github.com/dwjohnston/migrate-mui

Essentially the application migrates fine no problems. However, the tests start failing because that theme object doesn't come through. You don't typically need to/want to use a theme provider in tests.

For people using RTL, wrapping all tests in a theme provider can be achieved using a custom renderer - as outlined here.

[kartik8878]

[kartik8878]

i dont know how to fix this issue.......