无法在Material UI中从卡片内容中删除填充底部

Question

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

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

然后应用该样式：

<CardContent className={classes.cardcontent}></CardContent>

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

.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。

Answer 1

这是 Mui.V5 的语法

<CardContent sx={{ p:0, '&:last-child': { pb: 0 }}}></CardContent>

Answer 2

你要：

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

如果查看CardContent源代码，则可以找到它如何定义样式：

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

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

Answer 3

通过主题覆盖将卡片内容的填充设置为 0 时，以下效果很好：

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