Reactjs 必须为带有Typescript和材质UI的布尔属性设置值

我有一个非常简单的从MaterialUI复制和粘贴的代码，我正在尝试使用Typescript。我有一个

MediaCard

组件（重命名为

DisplayCard

）

编译代码时，出现以下错误：

（34,23）：必须为布尔属性设置值

我很难找出这个错误的来源，因为我不确定需要设置哪个属性值

代码如下：

App.tsx

import * as React from "react";
import DisplayCard from "./components/DisplayCard";

const App = () => {
  return <DisplayCard />;
};

export default App;

import*as React from“React”；
从“/components/DisplayCard”导入显示卡；
常量应用=（）=>{
回来
};
导出默认应用程序；

DisplayCard.tsx

import * as PropTypes from "prop-types";
import * as React from "react";

import { createStyles, withStyles } from "@material-ui/core/styles";

import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";

const styles = createStyles({
  card: {
    maxWidth: 345
  },
  media: {
    height: 140
  }
});

function DisplayCard(props: any) {
  const { classes } = props;
  return (
    <Card className={classes.card}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image='/static/images/cards/contemplative-reptile.jpg'
          title='Contemplative Reptile'
        />
        <CardContent>
          <Typography gutterBottom variant='h5' 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>
      </CardActionArea>
      <CardActions>
        <Button size='small' color='primary'>
          Share
        </Button>
        <Button size='small' color='primary'>
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

DisplayCard.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(DisplayCard);

import*作为“道具类型”中的道具类型；
从“React”导入*作为React；
从“@material ui/core/styles”导入{createStyles，withStyles}”；
从“@物料界面/核心/按钮”导入按钮；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/CardActionArea”导入CardActionArea；
从“@material ui/core/CardActions”导入CardActions；
从“@material ui/core/CardContent”导入CardContent；
从“@material ui/core/CardMedia”导入CardMedia；
从“@material ui/core/Typography”导入排版；
const styles=createStyles({
卡片：{
最大宽度：345
},
媒体：{
身高：140
}
});
功能显示卡（道具：任意）{
常量{classes}=props；
返回(
蜥蜴
蜥蜴是一种广泛分布的有鳞爬行动物，有6000多种
物种，分布于除南极洲以外的所有大陆
共有
了解更多
);
}
DisplayCard.propTypes={
类：PropTypes.object.isRequired
};
导出默认样式（样式）（显示卡）；

我想它指的是这一行

当您设置像

gutterBottom

这样的属性时，它被推断为

gutterBottom={true}

。由于您使用的是TypeScript，众神对您的不明确表示愤怒，因此请尝试显式设置属性

<Typography gutterBottom={true} variant='h5' component='h2'>

---

希望这将消除错误。

我认为它指的是这一行

当您设置像

gutterBottom

这样的属性时，它被推断为

gutterBottom={true}

。由于您使用的是TypeScript，众神对您的不明确表示愤怒，因此请尝试显式设置属性

<Typography gutterBottom={true} variant='h5' component='h2'>

希望这将消除错误