Javascript 无法从卡片内容中移除填充底部 ；在材质界面中

当使用Material UI中的Card组件时，CardContent似乎有一个24px的填充底部，我无法用以下代码覆盖它。我可以使用此方法设置paddingLeft、Right和Top，但由于某些原因，paddingBottom无法工作

const styles = theme => ({
  cardcontent: {
    paddingLeft: 0,
    paddingRight:0,
    paddingTop:0,
    paddingBottom: 0,
  },
})

然后应用这种风格：

这是我在浏览器中预览元素时看到的内容：

.MuiCardContent-root-158:last-child {
    padding-bottom: 24px;
}
.Component-cardcontent-153 {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

我可以将浏览器中的像素编辑为0。但我不知道如何在编辑器中以MuiCardContent-root-158:last child为目标并覆盖paddingBottom。

您想要：

const styles = {
  cardcontent: {
    padding: 0,
    "&:last-child": {
      paddingBottom: 0
    }
  }
};

如果查看，可以找到它是如何定义样式的：

export const styles = {
  /* Styles applied to the root element. */
  root: {
    padding: 16,
    '&:last-child': {
      paddingBottom: 24,
    },
  },
};

---

这有助于理解如何覆盖它们。

添加！重要信息，当通过主题覆盖将卡片内容的填充设置为0时，它将覆盖根css，以下功能很好：

overrides: {
  MuiCardContent: {
    root: {
      padding: 0,
      "&:last-child": {
        paddingBottom: 0,
     },
    },
  },
},

---

非常感谢你。我已经坐了好几个小时想弄明白这一点，结果很好。为了进一步理解，我将查看源代码。我遇到了完全相同的问题。CardContent内部似乎有一个3px底部填充。我可以在Chrome开发工具的用户代理样式表中看到它。我尝试使用CSS重置，但没有效果。你有什么想法吗？谢谢。@JamieCorkhill用您的代码创建一个新问题，并描述您的具体问题。参考此问题并描述为什么此解决方案不够（这将有助于避免将其标记为重复）。这里是：@AlexanderLötvall根据您试图消除填充的原因，您可能希望查看我对Jamie问题的回答，以确定该答案是否更合适（使用

CardMedia

而不是

CardContent

）。我宁愿使用CSS特性来处理这个问题，而不是使用！important。除非没有办法，否则使用它不是一个好的做法。“唯一可以覆盖！important标记的是另一个！important标记。只使用一次，您可能会得到一个包含！important标记的CSS文件，这是不理想的。”您可以在此处了解更多有关它的信息：这很有效，并且非常有助于在所有卡中禁用此填充。