Theme is empty in makeStyles for @mui/styles as compared to @material-ui/core

user_10602700 0
Viewed 674

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

material-ui reactjs themes javascript
1 Answers

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

user_18524870
Related