title: How to use useStyle to style Class Component in Material Ui
body: <p>I want to use useStyle to style the Class Component . But this can be easily  done hooks. but i want to use Component instead. But I cant figure out how to do this.</p>
  
  <pre><code>import React,{Component} from 'react';
  import Avatar from '@material-ui/core/Avatar';
  import { makeStyles } from '@material-ui/core/styles';
  import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
  
  
      const useStyles = makeStyles(theme =&gt; ({
        '@global': {
          body: {
            backgroundColor: theme.palette.common.white,
          },
        },
        paper: {
          marginTop: theme.spacing(8),
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        },
        avatar: {
          margin: theme.spacing(1),
          backgroundColor: theme.palette.secondary.main,
        }
  }));
  
  class SignIn extends Component{
    const classes = useStyle(); // how to assign UseStyle
    render(){
       return(
      &lt;div className={classes.paper}&gt;
      &lt;Avatar className={classes.avatar}&gt;
        &lt;LockOutlinedIcon /&gt;
      &lt;/Avatar&gt;
      &lt;/div&gt;
    }
  }
  export default SignIn;
  </code></pre>