MUI - V5 网格系统间距不会在网格项之间产生间距

Question

我正在学习 Material UI 和 React。从V5开始。 我有一个基本的 12 列网格就是为了学习这个。 间距不能正常工作。它只是在网格项目上创建一个奇怪的填充，其中项目本身正在获得内部填充，而我看不到排水沟。

我在最基本的示例上对其进行了测试，以确保其简单易懂：

这是代码：

//MuiGrid.js
import React from 'react'
import {Grid, Typography, Box} from '@mui/material';

export default function MuiGrid() {
  return (
    <Box>
        <Typography variant='h2'>MUI Grid!</Typography>      
        {/* Testing Grid Spacing */}
        <Box component='section'>
            <Typography variant='h5'>Testing Spacing</Typography>
            <Box>
              <Grid container spacing={2}>
                  <Grid item sx={{backgroundColor: 'primary.dark'}}>Item 1</Grid>
                  <Grid item sx={{backgroundColor: 'primary.main'}}>Item 2</Grid>
                  <Grid item sx={{backgroundColor: 'primary.light'}}>Item 3</Grid>
              </Grid>
            </Box>
        </Box>

    </Box>
  )
}

我已经设法用我的第一个沙箱重现了它。 这是链接： https://codesandbox.io/s/quirky-lake- 50pqf5?file=/src/Demo.tsx

这里是之前的截图&应用间距后，它仅显示奇怪的填充：

所有文档都非常模糊，仅显示基本信息和内容。我看不出我在这里做错了什么

编辑2：

我尝试将间距设置为0并按照答案的建议添加填充，这可以很好地提供填充但我无法获得排水沟

请参阅代码：

<Box component='section'>
              <Typography variant='h5'>Testing Spacing</Typography>
              <Box>
                <Grid container spacing={0}>
                    <Grid p={1} item sx={{backgroundColor: 'primary.dark'}}> <Box>Item 1</Box></Grid>
                    <Grid p={1} item sx={{backgroundColor: 'primary.main'}}><Box>Item 2</Box></Grid>
                    <Grid p={1} item sx={{backgroundColor: 'primary.light'}}><Box>Item 3</Box></Grid>
                </Grid>
              </Box>
          </Box>

结果：

这里还有我创建的 GitHub 问题的链接： https://github.com/mui /material-ui/issues/31244

我已向容器添加了背景，并为项目内的框着色，这提供了有关正在发生的情况的更好想法：

 <Box component='section'>
              <Typography variant='h5'>Testing Spacing</Typography>
              <Box>
                <Grid container spacing={2}
                  sx={{backgroundColor: 'secondary.main'}}
                >
                    <Grid  item> <Box sx={{backgroundColor: 'primary.dark'}}>Item 1</Box></Grid>
                    <Grid  item><Box sx={{backgroundColor: 'primary.main'}}>Item 2</Box></Grid>
                    <Grid  item><Box sx={{backgroundColor: 'primary.light'}}>Item 3</Box></Grid>
                </Grid>
              </Box>
          </Box>

结果：

Answer 1

间距确实可能与Grid 有点混淆。
我通常为网格容器设置 spacing(0) 并通过每个网格项的内容处理 padding / margin

 <Grid container spacing={0}>
    <Grid item>
       <Box p={1}>Item 1</Box> // use m={1} if you want margin
    </Grid>
    <Grid item>
       <Box p={1}>Item 2</Box>
    </Grid>    
    <Grid item>
       <Box p={1}>Item 3</Box>
    </Grid>
</Grid>

或者，如果您想使用 spacing(2) 您可以考虑间距的偏移，并将 Grid 容器包装在管理此偏移的 Box 中。

<Box m={xs ? -1 : -3}> // pseudo code check
  <Grid container spacing={2}>
    <Grid item xs={12} sm={4}>Item 1</Grid>
    <Grid item xs={12} sm={4}>Item 2</Grid>    
    <Grid item xs={12} sm={4}>Item 3</Grid>
  </Grid>
</Box>

就我个人而言，我不太喜欢这种方法。我喜欢使用网格来实现移动灵活性，并且使用边距偏移方法，您必须很好地跟踪每行有多少网格项，然后根据此调整框边距。

Answer 2

MUI 网格间距的行为有点出乎意料，因为它将网格项移动到右下角。为了保持网格项目居中，您需要手动添加填充到容器或项目的右侧和底部。
一种选择是简单地在网格的右侧和底部添加与填充相同的间距。缺点是，如果您的网格容器本身已经有填充，则您必须计算适当的填充量。

第二个选项是使网格项上下文感知，并在行已满时向网格行中的最后一项添加右填充。这仍然会让您需要计算网格的正确底部填充量。
如果右侧和底部填充的计算由 MUI 网格内部完成，会更直观。

然而，这里有一个简单的包装器组件，它调整外部网格项目的右填充以使项目水平居中。您只需在网格底部添加额外的填充即可。

编辑

实际上我意识到，仅向最后一列添加填充的初始方法也会更改最后一个元素的宽度。因此，这里有一个更简单的方法，即覆盖 MUI 间距，只需在所有元素的左侧和右侧添加一半的间距。代码也变得更加简单。

import { Breakpoint, GridSize, GridSpacing } from '@mui/material';
import { FC, ReactElement, cloneElement } from 'react';

type GridWrapperSettings = {
  spacing: GridSpacing;
  columns: { [key in Breakpoint]?: GridSize };
};

export const GridWrapper: FC<GridWrapperSettings & { children?: ReactElement }> = (props) => {
  if (!props.children) {
    return <></>;
  }

  // remove MUI spacing
  const grid = cloneElement(props.children, {
    spacing: 0,
  });

  // adjust items
  const items = grid.props.children.map((c) => {
    return cloneElement(c, {
      // assign responsive column settings
      xs: props.columns.xs,
      sm: props.columns.sm,
      md: props.columns.md,
      lg: props.columns.lg,
      xl: props.columns.xl,
      // assign half of the spacing on each side and a full spacing at the bottom
      sx: {
        pr: 0.5 * (props.spacing as number),
        pl: 0.5 * (props.spacing as number),
        pb: props.spacing,
        },
      },
    });
  });

  return cloneElement(grid, {
    children: items,
  });
};

使用时，您只需在包装器中设置一次间距和列：

<GridWrapper spacing={4} columns={{ xs: 12, md: 6}}>
   <Grid
     container
     direction="row"
     justifyContent="center"
     alignItems="stretch"
    >
      <Grid item>My Item</Grid>
      <Grid item>My Item</Grid>
    </Grid>
</GridWrapper>