无法从 Material UI 中的卡片内容中移除 padding-bottom

Posted 2023-02-22

【中文标题】无法从 Material UI 中的卡片内容中移除 padding-bottom

【英文标题】：Cant remove padding-bottom from Card Content in Material UI

【发布时间】：2019-06-11 16:39:45

【问题描述】：

当使用 Material UI 中的 Card 组件时，CardContent 似乎有一个 24px 的 padding-bottom，我无法用以下代码覆盖它。我可以使用这种方法设置 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。

【参考方案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);

【讨论】：

非常感谢。我已经坐了几个小时试图弄清楚这一点，而且效果很好。我将查看源代码以进一步了解。

我遇到了完全相同的问题。 CardContent 内似乎有一个 3 像素的底部填充。我可以在 Chrome 开发工具的用户代理样式表中看到它。我尝试使用 CSS 重置 - 无济于事。你有什么想法？谢谢。

@JamieCorkhill 使用您的代码创建一个新问题并描述您的具体问题。参考这个问题并描述为什么这个解决方案是不够的（这将有助于避免它被标记为重复）。

这里是：***.com/questions/54263946/…

@AlexanderLötvall 根据您尝试摆脱填充的原因，您可能想查看我对 Jamie 问题的回答，看看该回答是否更合适（使用 CardMedia 而不是 @ 987654334@).

【参考方案2】：

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

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

【讨论】：

这很有效，并且非常有助于在所有卡片中禁用此填充。

【参考方案3】：

添加 !important，它将覆盖根 css

【讨论】：

我宁愿用 CSS 特殊性来处理这个问题，而不是使用 !important。除非没有办法，否则使用它不是一个好习惯。 “唯一可以覆盖 !important 标记的是另一个 !important 标记。通过使用它一次，您最终可能会得到一个充满 !important 标记的 CSS 文件，这并不理想”您可以阅读有关它的更多信息这里：uxengineer.com/css-specificity-avoid-important-css/…