當(dāng)使用Material UI中的Card組件時(shí)，似乎CardContent有一個(gè)24px的padding-bottom，我不能用下面的代碼e覆蓋它。

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

然后應(yīng)用這種風(fēng)格:

& ltcard content class name = { classes . card content } & gt；& lt/card content & gt；

這是我在瀏覽器中預(yù)覽元素時(shí)看到的內(nèi)容:

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

下面是v3和v4的語法(下面是v5的例子):

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

下面是一個(gè)演示這一點(diǎn)的工作示例:

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源代碼，您會(huì)發(fā)現(xiàn)它是如何定義默認(rèn)樣式的:

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

這有助于理解如何覆蓋它們。

對于那些使用材質(zhì)UI版本5的用戶，這里有一個(gè)版本5的例子(使用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);

當(dāng)通過主題覆蓋將卡片內(nèi)容的填充設(shè)置為0時(shí)，以下操作效果良好:

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

下面是Mui的語法。V5

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

填充保持不變，但不可見。

<Card sx={{ boxShadow: 'none', backgroundImage: 'none' }}></Card>

補(bǔ)充！重要的是，它將覆蓋根css