找不到名称“类”。 TS2304？尝试使用React + Typescript样式时

Question

我目前正在尝试将自己的样式添加到我的网站，并且在尝试添加自定义className时遇到了当前问题。到目前为止，这是我的代码：

import React from 'react';
import Grid from "@material-ui/core/Grid";
import { makeStyles } from "@material-ui/core/styles";
import { withStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  aboutSection: {
    color:"red",
  }
});
class About extends React.Component {
  render() {
    return (
    <div className='about-body'>
    <Grid container className ={classes.aboutSection} spacing={4} justify='center'>
        <Grid item sm={12}>
            <br></br>
            <h1>A Little More About Me!</h1>
        </Grid>

        <Grid item xs={12}>
            More about Me
        </Grid>
    </Grid>

    </div>
    );
  }
}

export default About;

Answer 1

classes是普通的javascript变量，您希望它来自哪里？在给出的代码中似乎不存在。

[我认为您的意思是在组件中使用useStyles钩子。大概是这样的：

const classes = useStyles();

问题是，您的组件是一个类，并且在类组件中不允许使用钩子。您可以将其转换为功能组件，或使用withStyles HOC注入样式。

这里是功能组件的外观：

withStyles

这是

import React from 'react';
import Grid from "@material-ui/core/Grid";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  aboutSection: {
    color:"red",
  }
});
const About = (props) {
  const classes = useStyles();

  return (
    <div className='about-body'>
      <Grid container className ={classes.aboutSection} spacing={4} justify='center'>
        <Grid item sm={12}>
          <br></br>
          <h1>A Little More About Me!</h1>
        </Grid>
        <Grid item xs={12}>
          More about Me
        </Grid>
      </Grid>
    </div>
  );
}

export default About;

HOC的外观：

withStyles