material ui styling not applying

user_6716062 0
Viewed 2943

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;
material-ui reactjs styles
2 Answers

makeStyles returns a react hook to use in the component. Hooks also only work in functional components, so you'll need to convert Login to a functional component.

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

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

const Login = props => {
  const classes = useStyles();

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

Edit makeStyles hook creator

user_86908570

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);

user_95482850
Related