Material UI Grid Items 不占全宽度

Posted 2023-02-22

【中文标题】Material UI Grid Items 不占全宽度

【英文标题】：Material UI Grid Items not taking full width available

【发布时间】：2021-10-24 04:46:12

【问题描述】：

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

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

Outer Grid

Outer Grid Item 1Outer 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 组件和子/子）？我看到你有一个沙盒链接，但我怀疑如果代码在问题中直接可见，你会得到更多回复。

完成.... 请回答或投票，以便它可以覆盖更广泛的受众

【参考方案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"
        >