Cant remove padding-bottom from Card Content in Material UI

Question

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

And then applying that style:

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

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.

Transposal

Answer 1

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);

Copywriter

Thank you very much. I've been sitting for hours trying to figure this out and this worked well. I will take a look in the source code to understand further. – Transposal

I am having the exact same issue. There appears to be a 3px bottom padding inside CardContent. I can see it in User Agent Stylesheet in the Chrome Dev Tools. I tried using a CSS Reset - to no avail. Do you have any ideas? Thanks. – Residuary

@JamieCorkhill Create a new question with your code and describing your specific problem. Reference this question and describe why this solution isn’t sufficient (that will help avoid it being marked as a duplicate). – Copywriter

Here it is: #54264446 – Residuary

@AlexanderLötvall Depending on why you were trying to get rid of the padding, you may want to look at my answer on Jamie’s question to see if that answer is more appropriate (using CardMedia instead of CardContent). – Copywriter

you just saved me a great deal of time digging through their source. Thank you so much! – Phene

Setting it to 0 works for me to remove it. However, if I use any non-zero number, then it actually sets the padding to 8 times the multiple. e.g. paddingBottom: 10 becomes a padding of 80px. Can anyone explain why that is? (I can force it to pixels by writing: paddingBottom: '10px', but I don't generally need to do that for other Material UI styles.) – Warfarin

@Warfarin Were you using the sx prop? – Copywriter

@RyanCogswell yes, I was. Basically I had something like this: sx={{ '&:last-child': { paddingBottom: 10 }}}. – Warfarin

@Warfarin The sx prop implements the MUI "System" properties: mui.com/system/properties. For margin and padding, a unitless number is treated as "spacing units" (i.e. theme.spacing(value)) and the default spacing unit is 8px. – Copywriter

Answer 2

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

Robedechambre

This works and is very helpful to disable this padding in all cards. – Galingale

I'm very happy that somebody posted this answer. IMOP, this should be the only correct answer for this question. Cheers! – Cilice

Answer 3

Here's the syntax for Mui.V5

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

Nadbus

Answer 4

In MUI 5.13, I figured out how to remove padding by editing MuiCardContent into my theme config file. I write here an example theme I use that works well.

const theme = createTheme({
  palette: {
    ...
  }
  typography: {
    ...
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: ...
    },
    MuiCardContent: {
      styleOverrides: {
        root: {
          padding: "0",
          "&:last-child": {
            padding: "0",
          },
        },
      },
    },
    ...
  },
});

Stefanysteffane

Answer 5

You can use the sx prop in MUI to apply custom styles to the components in your JSX directly. In your example, you can target any specific class inside the card component.

Here, & refers to the current element, which in this case is the CardContent. And, it is followed by a : and the pseudo-class name, which is the last-child.

<CardContent
sx={{
    "&:last-child": {
      paddingBottom: 0,
    },
  }}
>

Frerichs

Answer 6

Padding stays but it's not visible.

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

Norton

Answer 7

use the css !important rule in mui v5
import { Card, CardContent } from "@mui/material";
const CardBox = ({ children }) => {
  return (
    <React.Fragment>
      <Card
        sx={{
      marginBottom: "5px !important",
        }}
      >
         <CardContent sx={{ padding: "3px !important" }}>
             {children} 
         </CardContent>
      </Card>
    </React.Fragment>
  );
};

export default CardBox;

Artisan

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Hizar

Answer 8

add !important, it will override the root css

Gonococcus

I'd rather deal with this with CSS specificity than using a !important. It's not good practice to use it unless there is no way around it. "The only thing that can override an !important tag is another !important tag. By using it one once, you potentially end up with a CSS file that is full of !important tags, which is not ideal" You can read more about it here: uxengineer.com/css-specificity-avoid-important-css/… – Gupta