How to correctly remove padding on Components

Question

I would like to nest a List inside a Card or an Expansion Panel, the problem is that both, the Expansion Panel and List are adding padding to the sides. The result looks really weird...

<Card>
    <CardHeader title="Title" subheader="Subheader"/>
    <CardContent>
        <List>
            <ListItem>
                <ListItemText
                primary={`<--- too much padding`}
                />
            </ListItem>
        </List>
    </CardContent>
</Card>

Here is a running example that shows the issue: https://codesandbox.io/s/material-demo-djzdz

I would like to get rid of the extra padding, I solved the issue temporarily by using the withStyles thingy like this:

import React from "react";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

import { withStyles } from "@material-ui/core/styles";
import MuiCardContent from "@material-ui/core/CardContent";

const NestedCardContent = withStyles(theme => ({
  root: {
    padding: 0
  }
}))(MuiCardContent);

export default function Color() {
  return (
    <Card>
      <CardHeader title="Title" subheader="Subheader" />
      <NestedCardContent>
        <List>
          <ListItem>
            <ListItemText primary={`padding is fine`} />
          </ListItem>
        </List>
      </NestedCardContent>
    </Card>
  );
}

Run it in codesandbox: https://codesandbox.io/s/material-demo-kyx38

---

As you can see, it works. But it feels absolutely hackish... I previously tried that mx, px spacing thing described here: https://material-ui.com/customization/spacing/

Without success either - changed nothing.

Furthermore I need this Kind of NestedCardContent in more than one Component. So how would you do it in a clean way? What is considered as a good practice here?

Answer 1

I recommend just removing the CardContent tag entirely. If you look at the source for CardContent, the only thing it does is padding.

If you don't want that padding just do:

import React from "react";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

export default function Color() {
  return (
    <Card>
      <CardHeader title="Title" subheader="Subheader" />
      <List>
        <ListItem>
          <ListItemText primary={`padding is fine`} />
        </ListItem>
      </List>
    </Card>
  );
}

This solution removes the 24px bottom padding as well which may or may not be what you want. If you want to retain the extra bottom padding, then just move your NestedCardContent component into its own file so you can import/reuse it.