CODEWITHSUNDEEP
javascriptcssreactjsmaterial-uijss
Alexander
Alexander

Reputation: 695

Cant remove padding-bottom from Card Content in Material UI

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.

Upvotes: 43

Views: 34622

Answers (8)

Bhavya Verma
Bhavya Verma

Reputation: 121

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

Upvotes: 1

SetUp
SetUp

Reputation: 9

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;

Upvotes: 0

Etrusko
Etrusko

Reputation: 21

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",
          },
        },
      },
    },
    ...
  },
});

Upvotes: 1

djole_krsticc
djole_krsticc

Reputation: 1

Padding stays but it's not visible.

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

Upvotes: 0

Akshay Kumar
Akshay Kumar

Reputation: 467

Here's the syntax for Mui.V5

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

Upvotes: 22

Ryan Cogswell
Ryan Cogswell

Reputation: 81156

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

Upvotes: 74

jhthompson
jhthompson

Reputation: 316

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

Upvotes: 16

frank edekobi
frank edekobi

Reputation: 113

add !important, it will override the root css

Upvotes: -4

Related Questions