Как правильно удалить отступы на компонентах

Question

Я бы хотел разместить List внутри карты или панели расширения, проблема в том, что обе панели расширения и List добавляют отступы по сторонам.Результат выглядит очень странно ...

<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 spacing: https://material -ui.com / customization / spacing /

Без успеха тоже - ничего не изменилось.

Более того, мне нужен этот Вид NestedCardContent в нескольких компонентах.Так как бы вы сделали это чисто?Что здесь считается хорошей практикой?

Answer 1

Я рекомендую просто полностью удалить тег CardContent. Если вы посмотрите на источник для CardContent , то, что он делает only , это заполнение.

Если вы не хотите этот отступ, просто сделайте:

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 в его собственный файл, чтобы вы могли импортировать / использовать его повторно.