title: Material UI V5 : makeStyles not working in material ui V5
body: <p>I was trying to upgrate material v5(from v4). As per <a href="https://mui.com/guides/migration-v4/#makestyles-typeerror-cannot-read-property-drawer-of-undefined" rel="nofollow noreferrer">documentation</a> , it is recommended to use
  Styled or sx API but I wanted to use makeStyles approach as in v4. Even though it is deprecated in v5 but can be used(as per <a href="https://mui.com/guides/migration-v4/#makestyles-typeerror-cannot-read-property-drawer-of-undefined" rel="nofollow noreferrer">documentation</a>). But I am unable to get theme variable inside makeStyles callback function causing cann't access property of undefined(eg. theme.breakpoints.between...)</p>
  <pre><code>import makeStyles from '@mui/styles/makeStyles';
  const useStyles = makeStyles((theme) =&gt; ({
     // here theme variable is undefined
    appBar: {
      backgroundColor: &quot;white&quot;,
      height: &quot;60px&quot;,
      padding: &quot;0px 5em&quot;,
      [theme.breakpoints.between(&quot;xs&quot;, 'lg')]: {
        padding: &quot;0px&quot;,
      },
    },
   .......
  </code></pre>
  <p>Here is my index.js</p>
  <pre><code>import { ThemeProvider, StyledEngineProvider } from &quot;@mui/material/styles&quot;;
  import theme from &quot;./theme/theme&quot;
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;StyledEngineProvider injectFirst&gt;
        &lt;ThemeProvider theme={theme}&gt;
          &lt;CssBaseline /&gt;
          &lt;App /&gt;
        &lt;/ThemeProvider&gt;
      &lt;/StyledEngineProvider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById(&quot;root&quot;)
  );
  </code></pre>
  <p>theme.js</p>
  <pre><code>import { createTheme, responsiveFontSizes, adaptV4Theme } from &quot;@mui/material/styles&quot;;
  import baseTheme from &quot;./baseTheme&quot;;
  
  let theme = createTheme(adaptV4Theme(baseTheme));
  theme = responsiveFontSizes(theme);
  
  export default theme;
  </code></pre>
  <p>Also I noticed, StyledEngineProvider is not being property imported(followed <a href="https://mui.com/guides/migration-v4/#style-library" rel="nofollow noreferrer">this</a>)</p>
  <p><a href="https://i.stack.imgur.com/Uao6v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uao6v.png" alt="enter image description here" /></a></p>
  <p>package.json</p>
  <pre><code>    &quot;@emotion/react&quot;: &quot;^11.5.0&quot;,
      &quot;@emotion/styled&quot;: &quot;^11.3.0&quot;,
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.32&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.15.1&quot;,
      &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.13&quot;,
      &quot;@mui/icons-material&quot;: &quot;^5.1.0&quot;,
      &quot;@mui/lab&quot;: &quot;^5.0.0-alpha.54&quot;,
      &quot;@mui/material&quot;: &quot;^5.1.0&quot;,
      &quot;@mui/styles&quot;: &quot;^5.1.0&quot;,
  </code></pre>
  <p>Do I have to install additional package to make it working?</p>