如何正确删除组件上的填充

Question

我想在卡或扩展面板中嵌套一个列表，问题是扩展面板和列表都在侧面添加了填充。结果看起来真的很奇怪...

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

下面是一个运行中的示例，它显示了该问题：https://codesandbox.io/s/material-demo-djzdz

我想摆脱多余的填充，我使用withStyles这样的东西暂时解决了这个问题：

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

在codeandbox中运行它：https://codesandbox.io/s/material-demo-kyx38

---

如您所见，它可以工作。 但是感觉绝对是黑的... 我以前尝试过mx, px间距描述的内容：https://material-ui.com/customization/spacing/

也没有成功-什么也没做。

此外，我在多个组件中都需要这种NestedCardContent。那么您将如何以一种干净的方式做到这一点？什么被认为是一种好的做法？

Answer 1

我建议只删除CardContent标签。如果您查看source for CardContent，则仅就是填充。

如果您不希望填充，请执行以下操作：

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

此解决方案也删除了您可能想要或不想要的24px底部填充。如果您想保留多余的底部填充，则只需将NestedCardContent组件移到其自己的文件中，即可导入/重用它。