Cant remove padding-bottom from Card Content in Material UI
Here's the syntax for v3 and v4 (v5 example further down):
const styles = {
cardcontent: {
padding: 0,
"&:last-child": {
paddingBottom: 0
}
}
};
Here's a working example demonstrating this:
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);
If you look at the CardContent source code, you can find how it defines the default 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.
For those using v5 of Material-UI, here's a v5 example (uses styled
instead of 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);
When setting the padding of Card Content to 0 via a theme override, the following works well:
overrides: {
MuiCardContent: {
root: {
padding: 0,
"&:last-child": {
paddingBottom: 0,
},
},
},
},
Here's the syntax for Mui.V5
<CardContent sx={{ p:0, '&:last-child': { pb: 0 }}}></CardContent>