title: Invalid hook call. Hooks can only be called inside of the body of a function component when apply style to class base component with material-ui
body: <p>I am just started to learn reactjs using material-ui but getting this error when apply style to my component. My code:</p>
  
  <pre><code>const useStyles = makeStyles(theme =&gt; ({
      root: {
          flexGrow: 1,
      },
      menuButton: {
          marginRight: theme.spacing(2),
      },
      title: {
          flexGrow: 1,
      },
  }));
  
  class NavMenu extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              isOpen: false
          };
      }
      render() {
          const classes = useStyles();
          return (
              &lt;div className={classes.root}&gt;
                  &lt;AppBar position="static"&gt;
                      &lt;Toolbar&gt;
                          &lt;IconButton
                              edge="start"
                              className={classes.menuButton}
                              color="inherit"
                              aria-label="Menu"
                          &gt;
                              &lt;MenuIcon /&gt;
                          &lt;/IconButton&gt;
                          &lt;Typography
                              variant="h6"
                              className={classes.title}
                          &gt;
                              News
                          &lt;/Typography&gt;
                          &lt;Button color="inherit"&gt;Login&lt;/Button&gt;
                      &lt;/Toolbar&gt;
                  &lt;/AppBar&gt;
              &lt;/div&gt;
          );
      }
  }
  export default NavMenu;
  </code></pre>
  
  <p>and this is Error:</p>
  
  <p><img src="https://i.stack.imgur.com/K8hHj.png" alt="enter image description here"></p>