无法在材料界面

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

通过主题替代将“卡片内容”的填充设置为0时，以下操作会很好：

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

Answer 2

您要

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,
    },
  },
};

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

Answer 3

添加！important，它将覆盖根CSS