如何在 Material UI 网格中应用装订线而不是边距？

Question

多年来，我一直在努力让我的响应式布局发挥作用！但是当我使用 class=spotlight 对 Grid 容器应用间距时，事情就会变得不协调。如何将间距应用到排水沟（即聚光灯容器网格内的网格项目之间）而不是边距（即网格外）。这是我的代码：

import React from "react";
import { Grid, makeStyles, Typography } from "@material-ui/core";
import MasterLayout from "../components/MasterLayout";
import ContentThumbnail from "../components/ContentThumbnail";
import ContentList from "../components/ContentList";

const useStyles = makeStyles((theme) => ({
  masterLayout: {
    padding: theme.spacing(3),
  },
  spotlight: {},
}));

const DefaultDashboard = ({ padding }) => {
  const classes = useStyles();
  return (
    <MasterLayout>
      {/*Top row with right bar */}
      <Grid
        container
        className={classes.masterLayout}
        spacing={3}
        alignItems="flex-start"
      >
        {/* Spotlight section */}
        <Grid container xl={8} lg={12} item className={classes.spotlight}>
          <Grid item xs={12}>
            <Typography variant="h3">Spotlight</Typography>
          </Grid>
          <Grid item xl={3} lg={3} md={3} xs={6}>
            <ContentThumbnail />
          </Grid>
          <Grid item xl={3} lg={3} md={3} xs={6}>
            <ContentThumbnail />
          </Grid>
          <Grid item xl={3} lg={3} md={3} xs={6}>
            <ContentThumbnail />
          </Grid>
          <Grid item xl={3} lg={3} md={3} xs={6}>
            <ContentThumbnail />
          </Grid>
        </Grid>
        {/* List section 1 */}
        <Grid container item xl={4} lg={3} md={6} xs={12}>
          <Grid item xs={12}>
            <Typography variant="h3">Title 2</Typography>
          </Grid>
          <Grid item xs={12}>
            <ContentList />
          </Grid>
        </Grid>
        {/* List section 2 */}
        <Grid container item xl={4} lg={3} md={6} xs={12}>
          <Grid item xs={12}>
            <Typography variant="h3">Title 2</Typography>
          </Grid>
          <Grid item xs={12}>
            <ContentList />
          </Grid>
        </Grid>
        {/* List section 3 */}
        <Grid container item xl={4} lg={3} md={6} xs={12}>
          <Grid item xs={12}>
            <Typography variant="h3">Title 3</Typography>
          </Grid>
          <Grid item xs={12}>
            <ContentList />
          </Grid>
        </Grid>
        {/* List section 4 */}
        <Grid container item xl={4} lg={3} md={6} xs={12}>
          <Grid item xs={12}>
            <Typography variant="h3">Title 4</Typography>
          </Grid>
          <Grid item xs={12}>
            <ContentList />
          </Grid>
        </Grid>
      </Grid>
    </MasterLayout>
  );
};

export default DefaultDashboard;

非常感谢，

凯蒂

Answer 1

TL;DR： 覆盖您的 Grid 项目的样式：

const useStyles = makeStyles((theme) => ({
//...
  gutter:{
    marginLeft: 80, // or something
    '&:first-child':{
      marginLeft: 0,
    }
  }
}));
//...
<Grid ... item classes={{item:classes.gutter}}>

以下网格项目有装订线（蓝色轮廓之间的装订线宽度为 80 像素，但第一个）：

NL;PR：看看这个pastebin。我查看了 Grid API，classes 对象允许您自定义组件的内部样式。我添加了一个伪类来为除第一个之外的所有孩子提供一些间距，从而添加内部排水沟。

Answer 2

也许我没有正确理解你，但你可以尝试使用 'alignItems' 道具（更改为拉伸）做一些事情，或者尝试使用 'alignContent' 来代替。

此link 可能会有所帮助。

抱歉，如果不是关于您需要的内容，可能会更容易帮助一些沙盒演示。