Material-UI CardContent 有一个 3px 底部填充答案

【问题标题】：Material-UI CardContent has a 3px Bottom PaddingMaterial-UI CardContent 有一个 3px 底部填充
【发布时间】：2019-06-13 07:22:12
【问题描述】：

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

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

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

我对使用 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 可以做得更好，但效率、优化和优雅并不是我关心的问题。

谢谢，杰米

【问题讨论】：

标签： reactjs material-design material-ui jsx

【解决方案1】：

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

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

但是，这也消除了卡片的凸起外观。处理这个问题的正确方法是在CardMedia 元素中指定图像，而不是在CardContent 元素中使用单独的img 标记。

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

这是一个显示此内容的 CodeSandbox：

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

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

【讨论】：

谢谢。那行得通，但是我必须在图片中添加一个边框半径以保持圆角。
谢谢。我知道这超出了原始问题的范围，但是您会碰巧知道缩放图像的最佳方法吗？原始图片中的图像似乎在这里：mdtgroup.com/wp-content/uploads/2017/02/… 您认为保持图片高度以完全填充 CardContent 的最佳方法是什么，但随后也向内缩放一点？
@JamieCorkhill 继续创建一个新问题 - 这是确保其他人可以找到相同问题的答案的最佳方式，并且增加了获得高质量答案的机会。跨度>
我明天会这样做，看看还有哪些其他解决方案。目前，我只使用了scale 属性并给出了CardContent overflow: hidden。

【解决方案2】：

看看这是不是你想要的。我更改了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",
  },
}

【讨论】：