score:57

Accepted answer

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

edit y05z1kko4j

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

edit remove bottom padding from card

score:-2

add !important, it will override the root css

score:5

here's the syntax for mui.v5

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

score:9

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

Related Query

More Query from same tag