材料的用户界面风格不适用

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 返回一个反应钩子在组件中使用。钩子也只能在功能组件中使用，所以你需要将其转换为 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;