无法从 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

这是 v3 和 v4 的语法（v5 示例在下方）：

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

下面是一个演示这一点的工作示例：

import React from "react";
import ReactDOM from "react-dom";

import CardContent from "@material-ui/core/CardContent";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  cardcontent: {
    padding: 0,
    "&:last-child": {
      paddingBottom: 0
    }
  }
};

function App(props) {
  return (
    <div>
      <CardContent
        className={props.classes.cardcontent}
        style={{ border: "1px solid black" }}
      >
        <div style={{ border: "1px solid red" }}>My Content</div>
      </CardContent>
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

如果您查看 CardContent source code，您会发现它是如何定义默认样式的：

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

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

对于那些使用 Material-UI 的 v5 的人，这里有一个 v5 示例（使用 styled 而不是 withStyles）：

import React from "react";
import ReactDOM from "react-dom";
import CardContent from "@mui/material/CardContent";
import { styled } from "@mui/material/styles";

const CardContentNoPadding = styled(CardContent)(`
  padding: 0;
  &:last-child {
    padding-bottom: 0;
  }
`);
function App(props) {
  return (
    <div>
      <CardContentNoPadding style={{ border: "1px solid black" }}>
        <div style={{ border: "1px solid red" }}>My Content</div>
      </CardContentNoPadding>
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

添加 !important，它将覆盖根 css

Answer 3

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

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

Answer 4

这是 Mui.V5 的语法

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

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

Cant remove padding-bottom from Card Content in Material UI

javascript

css

reactjs

material-ui

jss