注意:我已经研究过这个问题: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 Reset。
同样,我确信我的样式和 JSX 可以做得更好,但效率、优化和优雅不是我关心的问题。
谢谢, 杰米
最佳答案
底部的填充实际上是由与 Paper
(Card
所基于的)的“elevation”属性相关的框阴影样式引起的。将海拔设置为 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:
您还可以看到此演示中使用的这种方法:
关于reactjs - Material-UI CardContent 有一个 3px 的底部填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54263946/