Material-UI CardContent的底部填充为3px [英] Material-UI CardContent has a 3px Bottom Padding

问题描述

注意:我已经调查了这个问题:

Note: I already looked into this question: Cant remove padding-bottom from Card Content in Material UI

但是被接受的答案并不能解决我的问题.

But the accepted answer did not fix my issue.

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

I am using the Material UI React Library attempting to recreate the below image:

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

I am completely new to using the Material UI, so most of my code will likely not be optimized and probably does not follow best practices. Indeed, I'd be interested to hear how it could be made better.

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

Here is my code thus far:

<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重置，但没有帮助.

Notice the bottom padding. The Chrome Developer Tools show a 3px bottom padding under the User Agent Stylesheet. I imported a CSS Reset which did not help.

再次，我确定我的样式和JSX可以做得更好，但是效率，优化和优雅并不是我关注的问题.

Again, I'm sure that my styles and JSX could be made better, but efficiency, optimization, and elegance were not of my concern.

谢谢， 杰米

推荐答案

底部的填充实际上是由与Paper的"elevation"属性相关联的框阴影样式引起的(Card基于).将海拔高度设置为0可以消除它:

That padding at the bottom is actually caused by the box-shadow styling tied to the "elevation" property of Paper (which Card is based on). Setting the elevation to 0 gets rid of it:

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

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

However that also gets rid of the raised look of the card. The correct way to deal with this is to specify the image in a CardMedia element rather than using a separate img tag inside a CardContent element.

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

下面是一个显示此代码的代码沙箱:

Here's a CodeSandbox showing this:

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

You can also see this approach used in this demo:

https://material-ui.com/demos/cards/#ui -控件

这篇关于Material-UI CardContent的底部填充为3px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！