Question

错误：TypeError：无法读取属性＆＃39; card＆＃39;未定义的。

如果我删除内容className = {classes.card}，它可以正常工作。

但是没有课程，我就无法使用Const Styles。提前谢谢你

导入来自＆＃39;的反应＆＃39 ;; 从＆＃39; prop-types＆＃39;中导入PropTypes; 从＆＃39; material-ui / styles＆＃39;中导入{withStyles}; 来自＆＃39; material-ui / Card＆＃39;的进口卡，{CardActions，CardContent，CardMedia}; 来自＆＃39; material-ui / Button＆＃39;的导入按钮; 从＆＃39; material-ui / Typography＆＃39;;

导入排版

const styles = {
  card: {
    maxWidth: 345,
  },
  media: {
    height: 200,
  },
};
 function SimpleMediaCard(props) {
  const classes = props.classes;
  return (
    <div>
      <Card className={classes.card}>
        <CardMedia
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography type="headline" component="h2">
            Lizard
          </Typography>
          <Typography component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
        </CardContent>
        <CardActions>
          <Button dense color="primary">
            Share
          </Button>
          <Button dense color="primary">
            Learn More
          </Button>
        </CardActions>
      </Card>
    </div>
  );
}

SimpleMediaCard.propTypes = {
  classes: PropTypes.object.isRequired,
};

export { SimpleMediaCard };

Answer 1

属性className应该包含一个字符串，例如`className =“btn btn-large”

属性style需要一个对象，例如style={{maxWidth: 345}}

所以我认为你真的想说<Card style={styles.card}

Answer 2

缺少的是“ withStyles”：

SimpleMediaCard = withStyles(styles)(SimpleMediaCard)

这会将class属性传递给您的组件，错误将消失

Reactjs中的卡片

2 个答案: