title: How to invoke a hook from React class component?
body: <p>Question from React newbie!
  I have Material UI React login form and am trying to use hook within login form. But getting invalid hook call error. No luck so far. Help please.. loginformstyles.js is the hook I am trying to use in the signin.js file.. The login page has two text fields - username and password and a Submit button.</p>
  <pre><code>import React from 'react';
  import Avatar from '@material-ui/core/Avatar';
  import Button from '@material-ui/core/Button';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import TextField from '@material-ui/core/TextField';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import Checkbox from '@material-ui/core/Checkbox';
  import Link from '@material-ui/core/Link';
  import Grid from '@material-ui/core/Grid';
  import Box from '@material-ui/core/Box';
  import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
  import Typography from '@material-ui/core/Typography';
  import Container from '@material-ui/core/Container';
  import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
  import { useStyles } from './loginformstyles';
  
  export default class MyForm extends React.Component {
  
  Copyright() {
    return (
      &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot; align=&quot;center&quot;&gt;
        {'Copyright © '}
        &lt;Link color=&quot;inherit&quot; href=&quot;https://material-ui.com/&quot;&gt;
          Task Manager
        &lt;/Link&gt;{' '}
        {new Date().getFullYear()}
        {'.'}
      &lt;/Typography&gt;
    );
  }
  
  handleChange (event) {
    const email = event.target.value;
    this.setState({ email });
  }
  
  
  render() {
    const classes = useStyles();
    
    return (
      &lt;Container component=&quot;main&quot; maxWidth=&quot;xs&quot;&gt;
        &lt;CssBaseline /&gt;
        &lt;div className={classes.paper}&gt;
        &lt;Avatar className={classes.avatar}&gt;
            &lt;LockOutlinedIcon /&gt;
          &lt;/Avatar&gt;
          &lt;Typography component=&quot;h1&quot; variant=&quot;h5&quot;&gt;
            Sign in
          &lt;/Typography&gt;
          &lt;form className={classes.form} &gt;
            &lt;TextField
              variant=&quot;outlined&quot;
              margin=&quot;normal&quot;
              required
              fullWidth
              id=&quot;email&quot;
              label=&quot;Email Address&quot;
              name=&quot;email&quot;
              autoComplete=&quot;email&quot;
              autoFocus
              validators={['required', 'isEmail']}
              errorMessages={['this field is required', 'email is not valid']}
              onChange={this.handleChange}
            /&gt;
            &lt;TextField
              variant=&quot;outlined&quot;
              margin=&quot;normal&quot;
              required
              fullWidth
              name=&quot;password&quot;
              label=&quot;Password&quot;
              type=&quot;password&quot;
              id=&quot;password&quot;
              autoComplete=&quot;current-password&quot;
            /&gt;
            &lt;FormControlLabel
              control={&lt;Checkbox value=&quot;remember&quot; color=&quot;primary&quot; /&gt;}
              label=&quot;Remember me&quot;
            /&gt;
            &lt;Button
              type=&quot;submit&quot;
              fullWidth
              variant=&quot;contained&quot;
              color=&quot;primary&quot;
              className={classes.submit}
            &gt;
              Sign In
            &lt;/Button&gt;
            &lt;Grid container&gt;
              &lt;Grid item xs&gt;
                &lt;Link href=&quot;#&quot; variant=&quot;body2&quot;&gt;
                  Forgot password?
                &lt;/Link&gt;
              &lt;/Grid&gt;
              &lt;Grid item&gt;
                &lt;Link href=&quot;#&quot; variant=&quot;body2&quot;&gt;
                  {&quot;Don't have an account? Sign Up&quot;}
                &lt;/Link&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;Box mt={8}&gt;
          &lt;this.Copyright /&gt;
        &lt;/Box&gt;
      &lt;/Container&gt;
    );
  }
  }
  </code></pre>
  <pre><code>import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  
  export const useStyles = makeStyles((theme) =&gt; ({
      paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      },
      avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main,
      },
      form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(1),
      },
      submit: {
        margin: theme.spacing(3, 0, 2),
      },
    }));
  </code></pre>