Question

注意：我已经调查了这个问题：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: "white",
    fontSize: 25,
    marginRight: 10
  },
  mainText: {
    color: "white",
    display: "inline-block",
    position: "relative",
    top: -3
  },
  subText: {
    color: "white",
    marginLeft: 36,
  },
  heading: {
    padding: 0
  },
  mainPic: {
    width: 300,
    height: 200,
    marginBottom: 0,
    padding: 0
  },
  content: {
    padding: "0 !important",
    '&:last-child': {
      paddingBottom: "0 !important",
    },
  }
};

这是渲染时的样子：

注意底部填充。 Chrome开发者工具在用户代理样式表下显示3px的底部填充。我导入了CSS重置，但没有帮助。

再次，我确定可以改进我的样式和JSX，但是效率，优化和优雅并不是我关注的问题。

谢谢，杰米

Answer 1

查看这是否是您想要的。我更改了mainPic和content。此语法containerStyle={{ paddingBottom: 0 }}似乎不正确，即使在浏览器中得到警报也是如此。也许您想更改api CardActionArea的style或classes={{root}}。

mainPic: {
  width: 300,
  marginBottom: 0,
  padding: 0,
  borderRadius: '0 0 4px 4px',

},
content: {
  height: 225,
  padding: "0 !important",
  '&:last-child': {
    paddingBottom: "0 !important",
  },
}

Answer 2

底部的填充实际上是由与Paper（Card所基于的）“ elevation”属性相关联的框阴影样式引起的。将海拔高度设置为0可以消除它：

<Card className={classes.card} elevation={0}>

但是，这也摆脱了卡片的凸起外观。解决此问题的正确方法是在CardMedia元素中指定图像，而不是在img元素内使用单独的CardContent标签。

<CardMedia
          className={classes.mainPic}
          image="http://images1.fanpop.com/images/image_uploads/Golden-Gate-Bridge-san-francisco-1020074_1024_768.jpg"
        />

这是一个显示此代码的代码沙箱：

您还可以看到此演示中使用的这种方法：

https://material-ui.com/demos/cards/#ui-controls

Material-UI CardContent的底部填充为3px

2 个答案: