材料UI在反应js中创建卡片答案

【问题标题】：material UI create card in react js材料UI在反应js中创建卡片
【发布时间】：2020-02-22 18:29:19
【问题描述】：

我是这里的材料 ui 的新手，我正在尝试创建一张卡片，该卡片将在卡片和图像中具有页脚。

所以在这张卡片中，我正在尝试将图像放在中心，并且还想在页脚中添加一些数据，但卡片没有页脚。

谁能帮我解决这个问题

<Card className={css.root}>
  <CardContent>
    <CardMedia
      className={css.media}
      title="Contemplative Reptile"
      image={TestImage}
    />
    <Typography gutterBottom variant="h5" component="h2"></Typography>
    <Typography variant="body2" color="textSecondary" component="p"></Typography>
  </CardContent>
</Card>);
}

【问题讨论】：

亲爱的 ganesh，你的设计是什么？您可以编写自己的页脚组件。并且我为您提供了包装所有 Material UI 组件，即使它们中的哪些没有任何更改。
@AmerllicA 我如何在中心添加图像至少你可以给我一个提示
亲爱的兄弟，您可以使用flex-box CSS 方法，或者将display: block; margin: 0 auto; 设置为图像或其包装器使其居中。但我猜你的问题是使用 Material UI。

标签： css reactjs material-ui

【解决方案1】：

按照此模式，将您的 CardMedia 块放在 CardContent 之外，并使用 component="img" 将中心与卡片中的图像对齐

<Card className={css.root}>
          <CardMedia
            component="img"
            className={css.media}
            title="Contemplative Reptile"
            image={TestImage}
          />
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2"></Typography>
            <Typography variant="body2" color="textSecondary" component="p" ></Typography>
          </CardContent>
        </Card>

【讨论】：