材质 ui 样式不适用

Question

由于某种原因，我的材质 ui 样式不适用于我的 html 元素？知道为什么吗？我没有应用于此页面的其他样式

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

在你的情况下，如果你想为你的类组件设置样式，你应该使用withStyles。
试试这个：

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

Answer 2

makeStyles 返回一个要在组件中使用的反应钩子。 Hooks 也只能在函数式组件中使用，因此您需要将 Login 转换为函数式组件。

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;