Material-UI CardContent存在3px底部内边距，已有解决方案无效

我之前查阅过《Cant remove padding-bottom from Card Content in Material UI》这个问题，但其中的已采纳方案没能解决我的问题。我现在正在用Material UI React库尝试复刻一个效果，作为完全的Material UI新手，我的代码可能既没优化也不符合最佳实践，同时我也很想了解如何优化这段代码。

我的JSX代码如下：

<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重置，但完全没效果。目前我先不考虑代码的效率、优化与简洁性，希望能先解决这个内边距问题，感谢解答！

内容的提问来源于stack exchange，提问作者user6233283