MUI 网格系统占据 100% 的宽度答案

【问题标题】：MUI Grid System to Take Up 100% of WidthMUI 网格系统占据 100% 的宽度
【发布时间】：2022-01-25 05:19:29
【问题描述】：

希望你们一切都好。

我在寻找如何让我的 MUI Grid 占据它所嵌套的 Box 组件的整个宽度时遇到问题。

它的外观如下：

我希望右边的空白空间被整个网格占用，但我似乎无法找到关于如何解决此问题的简明答案。

这是我在 VS Code 中的代码：

这是网格的文本代码：

<Grid item key={days}>
        <Box
          key={days}
          sx={{
            width: 150,
            height: 150,
            backgroundColor: 'primary.dark',
            '&:hover': {
              backgroundColor: 'primary.main',
              opacity: [0.9, 0.8, 0.7],
            },
          }}
        />
      </Grid>
    );
  }
  return (
    <Grid container spacing={1}>
      {/* And here I render the box array */}
      {box}
    </Grid>
  );

这里是父元素：

这是父元素的真实文本代码：

// Parent Element
    <Container>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: 1,
        }}
      >
        {/* The Title of The Page */}
        <Typography align="center" variant="h4" mt={2} mb={2} sx={{ fontWeight: 'bold' }}>
          {t('Happy Chocolate Days!')}
        </Typography>
        {/* My Calendar Grid Component Inside The Box Component */}
        <Calendar />
      </Box>
    </Container>

提前感谢您的帮助

【问题讨论】：

标签： reactjs material-ui css-grid

【解决方案1】：

您将框设置为固定的宽度和高度150，因此即使它们的包装器还有更多空间，但没有足够的空间容纳另一个框，因此它会分成新行，从而为您留下右边的空白处。

【讨论】：

感谢您的回答，我该怎么做才能解决这个问题？因为我希望这些框看起来像一个日历日，我尝试删除宽度属性，但这并没有给我所需的结果
好吧，你要么需要使盒子之间的间距不固定，你正在使用spacing={1}，这会增加盒子之间的空间，或者你可以在包装器中将盒子居中并且不在乎侧面的空间。

【解决方案2】：

您可以将所有这些框都设置在Container的中间，或者为Container 选择一个width，它可以有相同的width 的7 boxes，它们之间有一些空间，比如容器的宽度为770px，它们之间的空间为10px。但在这种情况下，您不需要Grid，只需纯 css。

【讨论】：

感谢您的帮助，非常感谢您抽出宝贵时间 :)