时间戳

首页 > 解决方案 > 找不到名称“类”。TS2304？尝试使用 React + Typescript 进行样式设置时

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

问题描述

我目前正在尝试将自己的样式添加到我的网站中，当我尝试添加自定义样式时遇到了这个问题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;

标签： reactjstypescriptmaterial-uistylingjss

解决方案

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

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

const classes = useStyles();

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

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

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;

以下是withStylesHOC 的外观：

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

推荐阅读