Reactjs Can'；在typescript中，不要将react组件与材质ui样式类一起使用

我是react的新手，目前开始了一个学习项目，在该项目中，我将typescript 3.7.2与材料ui 4.11.0和react 16.13.1一起使用。 我已经将我的所有页面布局创建为功能组件，但在尝试将它们转换为类组件时（我发现这比使用挂钩更容易），我得到了以下错误（附加为注释）， 我看过stackoverflow的一些其他答案，并尝试了不同的方法，但似乎都不起作用，我读过的大多数答案都是2-3年前的，我猜从那以后的一些变化是破坏性的变化，有人知道如何解决这些问题吗

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 LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";

const styles = makeStyles((theme) => ({
  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),
    marginBottom: theme.spacing(15),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

class LoginPage extends React.Component {
  render() {
    // Next line is first problem - I get :
    // **"Property 'classes' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.ts(2339)"**
    const { classes } = this.props;
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div className={classes.paper}>
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form className={classes.form} noValidate>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
              autoFocus
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
            />
            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              label="Remember me"
            />
            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
            >
              Sign In
            </Button>
            <Grid container>
              <Grid item xs>
                <Link href="/reset-password" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
              <Grid item>
                <Link href="/register" variant="body2">
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
      </Container>
    );
  }
}

// 'styles' here produces a
**/*
Argument of type '(props?: any) => Record<"paper" | "avatar" | "form" | "submit", string>' is not assignable to parameter of type 'Styles<Theme, {}, "paper" | "avatar" | "form" | "submit">'.
  Type '(props?: any) => Record<"paper" | "avatar" | "form" | "submit", string>' is not assignable to type 'StyleRulesCallback<Theme, {}, "paper" | "avatar" | "form" | "submit">'.
    Call signature return types 'Record<"paper" | "avatar" | "form" | "submit", string>' and 'Record<"paper" | "avatar" | "form" | "submit", CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>>' are incompatible.
      The types of 'paper' are incompatible between these types.
        Type 'string' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.ts(2345)
*/**
export default withStyles(styles)(LoginPage);

从“React”导入React；
从“@material ui/core/Avatar”导入化身；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/core/Link”导入链接；
从“@material ui/core/Grid”导入网格；
从“@material ui/icons/LockOutlined”导入LockOutlinedIcon；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/styles”导入{makeStyles，withStyles}”；
从“@material ui/core/Container”导入容器；
const styles=makeStyles（（主题）=>({
论文：{
marginTop：主题。间距（8），
显示：“flex”，
flexDirection:“列”，
对齐项目：“中心”，
},
化身：{
边距：主题。间距（1），
背景色：theme.palete.secondary.main，
},
表格：{
宽度：“100%，//修复IE 11问题。
marginTop：主题。间距（1），
marginBottom：主题。间距（15），
},
提交：{
边距：主题。间距（3,0,2），
},
}));
类LoginPage扩展了React.Component{
render（）{
//下一行是第一个问题-我得到：
//**“Readonly&Readonly”类型上不存在属性“classes”。ts（2339）**
const{classes}=this.props；
返回(
登录
登录
忘记密码了？
{“没有帐户？注册”}
);
}
}
//这里的“样式”生成一个
**/*
类型为“（props？：any）=>Record”的参数不能分配给类型为“Styles”的参数。
类型'（props？：any）=>Record'不可分配给类型'StyleRulesCallback'。
调用签名返回类型“Record”和“Record”不兼容。
这些类型之间的“纸张”类型不兼容。
类型“string”不可分配给类型“cssprroperties | createcssprroperties | PropsFunc”.ts（2345）
*/**
导出默认样式（样式）（登录页面）；

错误是且不可与样式一起使用

对于高阶组件（HOC:LoginPage），您应该遵循以下步骤：

替换

   const styles = makeStyles((theme) => ({
    paper: {
     marginTop: theme.spacing(8),...

与

withStyles

接受类型为

cssprroperties

的对象作为参数，而不是字符串

makeStyles

返回类名

---

祝你好运，如果我解决了你的问题，请一定告诉我。

我也不太会用TypeScript来处理材质UI，我也遇到过同样的问题。请参阅此工作示例：

您应该添加一些类型定义：

const styles=makeStyles（（主题）=>({
→ 
常量样式：样式=（主题：主题）=>({

class LoginPage扩展了React.Component{
→
接口IProps{
类别？：任何；
}
类LoginPage扩展了React.Component{

有关更多信息，请参阅和。

请参阅下面的我的。

    const styles = {
     paper: {
      marginTop: theme.spacing(8),...

const styles = makeStyles((theme) => ({
→ 
const styles: Styles<Theme, {}, string> = (theme: Theme) => ({

class LoginPage extends React.Component {
→
interface IProps {
  classes?: any;
}
class LoginPage extends React.Component<IProps, any> {