Question

我当前正在尝试将自己的样式添加到我的网站，当我尝试添加自定义className时遇到了此问题。

找不到名称“类”。 TS2304

到目前为止，这是我的代码：

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注入样式。

以下是它作为功能组件的外观：

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;

withStyles HOC的外观如下：

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

const styles = {
  aboutSection: {
    color:"red",
  }
};
class About extends React.Component {
  render() {
    const { classes } = props;

    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 withStyles(styles)(About);

Answer 2

你失踪了

featured_media: 15195

https://material-ui.com/styles/basics

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

2 个答案: