title: MUI - makeStyles - Cannot read properties of undefined
body: <p>I'm studying MUI, and in the course, the instructor asks me to style just one component and not the entire theme.</p>
  <p>For that, it uses the <strong>makeStyles</strong> function and spreads the <code>theme.mixins.toolbar</code>. The problem is when I do this, I have the following error:</p>
  <pre class="lang-none prettyprint-override"><code>TypeError: Cannot read properties of undefined (reading 'toolbar')
  </code></pre>
  <p>This course is apparently in version 4, and I am using version 5. Despite this, my code appears to follow the changes that the documentations asks for. So what could be causing this error?</p>
  <p><strong>app.js</strong></p>
  <pre><code>import &quot;./App.css&quot;;
  import Header from &quot;./components/ui/Header&quot;;
  import { ThemeProvider } from &quot;@material-ui/core/styles&quot;;
  import theme from &quot;./components/ui/Theme&quot;;
  
  function App() {
      return (
          &lt;ThemeProvider theme={theme}&gt;
              &lt;Header /&gt;
          &lt;/ThemeProvider&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p><strong>Theme.js</strong></p>
  <pre><code>import { createTheme } from &quot;@material-ui/core/styles&quot;;
  
  const arcBlue = &quot;#0B72B9&quot;;
  const arcOrange = &quot;#FFBA60&quot;;
  
  export default createTheme({
      typography: {
          h3: {
              fontWeight: 100,
          },
      },
      palette: {
          common: {
              blue: `${arcBlue}`,
              orange: `${arcOrange}`,
          },
          primary: {
              main: `${arcBlue}`,
          },
          secondary: {
              main: `${arcOrange}`,
          },
      },
  });
  
  </code></pre>
  <p><strong>header/index.jsx</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import AppBar from &quot;@mui/material/AppBar&quot;;
  import Toolbar from &quot;@mui/material/Toolbar&quot;;
  import useScrollTrigger from &quot;@mui/material/useScrollTrigger&quot;;
  import Typography from &quot;@mui/material/Typography&quot;;
  import { makeStyles } from &quot;@material-ui/styles&quot;;
  
  function ElevationScroll(props) {
      const { children, window } = props;
      const trigger = useScrollTrigger({
          disableHysteresis: true,
          threshold: 0,
          target: window ? window() : undefined,
      });
  
      return React.cloneElement(children, {
          elevation: trigger ? 10 : 0,
      });
  }
  
  const useStyles = makeStyles((theme) =&gt; ({
      toolbarMargin: { ...theme.mixins.toolbar },
  }));
  
  function Header() {
      const classes = useStyles();
      return (
          &lt;React.Fragment&gt;
              &lt;ElevationScroll&gt;
                  &lt;AppBar color=&quot;primary&quot;&gt;
                      &lt;Toolbar&gt;
                          &lt;Typography variant=&quot;h3&quot; component=&quot;h3&quot;&gt;
                              Nome de teste
                          &lt;/Typography&gt;
                      &lt;/Toolbar&gt;
                  &lt;/AppBar&gt;
              &lt;/ElevationScroll&gt;
              &lt;div className={classes.toolBarMargin} /&gt;
          &lt;/React.Fragment&gt;
      );
  }
  
  export default Header;
  
  </code></pre>