时间戳

首页 > 解决方案 > 如何在 Material UI 网格中应用装订线而不是边距？

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

问题描述

我一直在努力让我的响应式布局正常工作！但是，当我使用 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;

非常感谢，

凯蒂

标签： cssreactjsmaterial-ui

解决方案

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 对象允许您自定义组件的内部样式。我添加了一个伪类来为除第一个之外的所有孩子提供一些间距，从而添加内部排水沟。

推荐阅读