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

当从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。

最佳答案

你要:

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

如果查看CardContent source code，则可以找到它如何定义样式:

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

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