title: ReactJS: TypeError: theme.spacing is not a function
body: <p>I am building a 'ReactJS' application and came across the following error:</p>
  <blockquote>
  <pre><code>TypeError: theme.spacing is not a function
  (anonymous function)
  E:/Projects/PortfolioSite/React-Portfolio-Website/react-portfolio-website/src/components/Navbar.js:39
    36 |     avatar:{
    37 |         display: &quot;block&quot;,
    38 |         margin: &quot;0.5rem auto&quot;,
  &gt; 39 |         width: theme.spacing(13),
    40 |         heght: theme.spacing(13)
    41 |     }
    42 | }));
  </code></pre>
  </blockquote>
  <p>I have already imported <code>makestyles</code> from <code>&quot;@material-ui/styles&quot;</code>. But it outputs the above error:</p>
  <p>For your reference I would like to add the complete code I used:</p>
  <pre><code>import React from 'react';
  import {makeStyles} from &quot;@material-ui/styles&quot;;
  
  import {
      AppBar,
      Toolbar,
      ListItem,
      ListItemIcon,
      IconButton,
      ListItemText,
      Avatar,
      Divider,
      List,
      Typography,
      Box
  } from &quot;@material-ui/core&quot;;
  
  import {
      ArrowBack,
      AssignmentInd,
      Home,
      Apps,
      ContactMail
  
  } from &quot;@material-ui/icons&quot;;
  
  import avatar from &quot;../Assets/Images/avatar.png&quot;;
  
  //CSS styles
  const useStyles = makeStyles( theme =&gt;({
      menuSliderContainer:{
          width: 250,
          background: &quot;#511&quot;,
          height: &quot;30rem&quot;
      },
      avatar:{
          display: &quot;block&quot;,
          margin: &quot;0.5rem auto&quot;,
          width: theme.spacing(13),
          heght: theme.spacing(13)
      }
  }));
  
  const menuItems = [
      {
          listIcon: &lt;Home/&gt;,
          listText: &quot;Home&quot;
      },
      {
          listIcon: &lt;AssignmentInd/&gt;,
          listText: &quot;Resume&quot;
      },
      {
          listIcon: &lt;Apps/&gt;,
          listText: &quot;Portfolio&quot;
      },    
      {
          listIcon: &lt;ContactMail/&gt;,
          listText: &quot;Contact&quot;
      },    
      {
          listIcon: &lt;Home/&gt;,
          listText: &quot;Home&quot;
      }
  ]
  
  const Navbar = () =&gt; {
      const classes = useStyles()
      return (
          &lt;&gt;
          &lt;Box component=&quot;div&quot; className={classes.menuSliderContainer}&gt;
              &lt;Avatar src={avatar} className={classes.avatar} alt=&quot;Pawara Siriwardhane&quot;/&gt;
              &lt;Divider/&gt;
              &lt;List&gt;
                  {menuItems.map((lstItem,key)=&gt;(
                      &lt;ListItem button key={key}&gt;
                          &lt;ListItemIcon&gt;
                              {lstItem.listIcon}
                          &lt;/ListItemIcon&gt;
                          &lt;ListItemText/&gt;
                      &lt;/ListItem&gt;
                  ))}
              &lt;/List&gt;
          &lt;/Box&gt;
          &lt;Box component=&quot;nav&quot;&gt;
              &lt;AppBar position=&quot;static&quot; style={{background:&quot;#222&quot;}}&gt;
                  &lt;Toolbar&gt;
                  &lt;IconButton&gt;
                      &lt;ArrowBack style={{color: &quot;tomato&quot;}}/&gt;
                  &lt;/IconButton&gt;
                  &lt;Typography variant=&quot;h5&quot; style={{color:&quot;tan&quot;}}&gt; Portfolio &lt;/Typography&gt;
                  &lt;/Toolbar&gt;
              &lt;/AppBar&gt;
          &lt;/Box&gt;
          &lt;/&gt;
      )
  }
  
  export default Navbar
  </code></pre>
  <p>I have already gone through the<br />
  already asked questions: <a href="https://stackoverflow.com/questions/54609338/why-material-ui-is-not-recognizing-the-theme-spacing-function">Why Material-UI is not recognizing the theme.spacing function?</a><br />
  &amp; the GitHub conversation: <a href="https://github.com/mui-org/material-ui/pull/14099" rel="nofollow noreferrer">[Grid] Use a unitless spacing API #14099</a><br />
  but could not find a working answer.</p>
  <p>I am much obliged if anybody can explain the solution for the error.</p>
  <p>Thank you in advance.</p>