Не удается найти имя "классы". TS2304? при попытке стилизовать с помощью React + Typescript - PullRequest
Новая
       124

Не удается найти имя "классы". TS2304? при попытке стилизовать с помощью React + Typescript

0 голосов
/ 26 мая 2020

В настоящее время я пытаюсь добавить свои собственные стили на свой веб-сайт, и я столкнулся с этой проблемой, когда пытаюсь добавить собственный 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;

1 Ответ

0 голосов
/ 26 мая 2020

classes - это обычная переменная javascript, откуда вы ожидаете, что она появится? В приведенном коде его, похоже, не существует.

Я думаю, что вы хотели использовать хук useStyles в вашем компоненте. Вероятно, вот так: 

const classes = useStyles();

Проблема в том, что ваш компонент является классом, а хуки не разрешены в компонентах класса. Вы можете преобразовать его в функциональный компонент или использовать withStyles HO C для внедрения стилей.

Вот как это будет выглядеть как функциональный компонент: 

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 HO C: 

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