material ui styling not applying

Question

For some reason my material ui styles are not applying to my html element? Any idea why? I have no other styles applied to this page

import React, { Component } from 'react';
import LoginForm from '../components/form/loginForm';
import { makeStyles } from '@material-ui/core';

const classes = makeStyles( (theme) => ({
  root: {
    paddingTop: theme.spacing(8),
    backgroundColor: "white"
  },
}) )

class Login extends Component {
  render() {
    return(
      <div className = {classes.root}>
        <LoginForm/>
      </div>
    );
  }
}
export default Login;

Answer 1

In your case, if you want to style your class component, you should use withStyles.
Try this:

import React, { Component } from 'react';
import LoginForm from '../components/form/loginForm';
import { withStyles } from '@material-ui/core/styles';

const useStyles = (theme) => ({
  root: {
    paddingTop: theme.spacing(8),
    backgroundColor: "white"
  },
})

class Login extends Component {
  render() {
    const { classes } = this.props
    return(
      <div className = {classes.root}>
        <LoginForm/>
      </div>
    );
  }
}
export default withStyles(useStyles)(Login);