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, }, }, },},