无法在Material UI中从卡片内容中删除底部填充 [英] Cant remove padding-bottom from Card Content in Material UI

问题描述

在Material UI中使用Card组件时，似乎CardContent的底部填充为24px，我无法用以下代码覆盖.我可以使用此方法设置paddingLeft，Right和Top，但出于某种原因paddingBottom无法使用.

When using the Card component from Material UI it seems like the CardContent has a padding-bottom of 24px that i cannot override with the following code. I can set paddingLeft, Right and Top using this method but for some reason paddingBottom won't work.

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

然后应用该样式:

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

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

this is what I see when previewing the elements in the browser:

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

I can edit the pixels in the browser to 0. But I cannot figure out how to target MuiCardContent-root-158:last-child and override paddingBottom in my editor.

推荐答案

您要:

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

如果您查看

If you look at the CardContent source code, you can find how it defines the styles:

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

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

This can be helpful in understanding how to override them.

这篇关于无法在Material UI中从卡片内容中删除底部填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！