时间戳

首页 > 解决方案 > Material UI Grid Items 不占全宽度

css - Material UI Grid Items 不占全宽度

问题描述

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

为清楚起见，请参阅屏幕截图（在 Google Chrome 中拍摄的所有屏幕截图）。

外网格

外部网格项目 1 外部网格项目 2

内部网格系统

现在我们开始挤压

UI 中断...但是第二个组件的宽度仍然与以前相同

外部网格的片段

<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>

沙盒链接

标签： cssreactjsmaterial-uimaterial-designstyling

解决方案

固定变体

只需在 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"}
        >

推荐阅读