I am trying to upgrade to material-ui from version 4.11 to version 5 but facing issues with themes
import { createTheme } from '@mui/material/styles';
import {
ThemeProvider,
StyledEngineProvider,
} from '@mui/material/styles';
const theme = createTheme({
...custom themes
});
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</StyledEngineProvider>
Inside the app
scenario 1
import { makeStyles } from "@mui/styles";
scenario 2
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((theme)=>{
console.log("theme ",theme)
return ({
...my themes
})
}
console shows an empty object for scenario 1 in case of mui/styles while there is theme object available for scenario 2 with material-ui
The issue here is that you're importing your ThemeProvider from @mui/material/styles. In order for the theme object to be populated correctly in makeStyles, you'll need to import the ThemeProvider exported by the @mui/styles package.
Now having said that. MUI is deprecating makeStyles (and the @mui/styles package all together). You can see here in their v4 to v5 migration documents that they recommend using tss-react as a makeStyles replacement, assuming you're using emotion as your styling engine.
https://mui.com/material-ui/guides/migration-v4/#2-use-tss-react