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.

Answer 1

You want:

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.