相关疑难解决方法(0)

注意：我已经研究过这个问题：Cant remove padding-bottom from Card Content in Material UI

但接受的答案并没有解决我的问题。

我正在使用 Material UI React Library 尝试重新创建下图：

我对使用 Material UI 完全陌生，因此我的大部分代码可能不会得到优化，并且可能不会遵循最佳实践。事实上，我很想听听如何让它变得更好。

到目前为止，这是我的代码：

<Card className={classes.card}>
  <CardActionArea containerStyle={{ paddingBottom: 0 }}>
    <CardMedia
      className={classes.media}
      title="Contemplative Reptile"
      image="none"
    >
      <div className={classes.heading}>
        <AccessAlarmIcon className={classes.icon}/> 
        <Typography className={classes.mainText} variant="h5" component="h2">Delayed</Typography>
        <Typography className={classes.subText} variant="subtitle1" component="h5">9:30pm Departure</Typography>
      </div>        
    </CardMedia>
    <CardContent className={classes.content}>
      <img className={classes.mainPic} src="http://images1.fanpop.com/images/image_uploads/Golden-Gate-Bridge-san-francisco-1020074_1024_768.jpg"></img>
    </CardContent>
  </CardActionArea>
</Card>

具有这些样式：

const styles = {
  card: {
    maxWidth: 300,
  },
  media: {
    height: 60,
    backgroundColor: "#FF1547",
    padding: 16
  },
  icon: {
    color: …