Material UI Grid Items 不占全宽度答案

【问题标题】：Material UI Grid Items not taking full width availableMaterial UI Grid Items 不占全宽度
【发布时间】：2021-10-24 04:46:12
【问题描述】：

我在 Material UI 中使用了嵌套的网格系统，并且网格项目仅采用固定宽度并留下一些空间。当固定空间耗尽时，组件不会挤压其内部的可用空间，而是会破坏 UI。

为了清楚起见，请查看屏幕截图（所有屏幕截图均在 Google Chrome 中截取）。

Outer Grid

Outer Grid Item 1 Outer Grid Item 2

Inner Grid System

Now we start to squeeze

UI breaks... But the second component still has the same width as before

外部网格的片段

<Grid container justifyContent="space-evenly" direction={isMd ? "row" : "column"}>
          <Grid item sx={{ minWidth: "300px" }}>
            <Typography>Component coming soon</Typography>
          </Grid>
          <Grid item component={Footer2}></Grid>
</Grid>

内部网格的片段

        <Grid
          container
          justifyContent="space-evenly"
          direction={isMd ? "row" : "column"}
          gap={6}
        >
          <Grid item links={["COMPANY", "About", "Experts and Spokesmodels"]}>
            <Listings
              links={["COMPANY", "About", "Experts and Spokesmodels"]}
            ></Listings>
          </Grid>
          <Grid item>
            <Listings
              links={[
                "CUSTOMER SERVICE",
                "Contact Us",
                "My Account",
                "Store Locator",
                "Redeem Rewards"
              ]}
            ></Listings>
          </Grid>
          <Grid item>
            <Listings
              links={[
                "MORE TO EXPLORE",
                "Beauty Magazine",
                "Tools and Consultations",
                "Offers",
                "#LorealParis"
              ]}
            ></Listings>
          </Grid>
        </Grid>

SandBox link

【问题讨论】：

嗨，朱莉娅，欢迎！您能否更新您的问题以包含相关代码 sn-ps（可能是主 Grid 组件和子/子）？我看到你有一个沙盒链接，但我怀疑如果代码在问题中直接可见，你会得到更多回复。
完成.... 请回答或投票，以便它可以覆盖更广泛的受众

标签： css reactjs material-ui material-design styling

【解决方案1】：

Fixed variant

只需在FooterP2.js中删除Grid组件的gap props，为ScopedCssBaseline添加CSS规则并为元素设置maxWidth（例如我设置了800px）。

<ThemeProvider theme={darkTheme}>
      <ScopedCssBaseline 
      style={{ flex: "1 1 auto", maxWidth: "800px" }}>
        <Grid
          container
          justifyContent="space-evenly"
          direction={isMd ? "row" : "column"}
        >

【讨论】：