在 React 和 Material-UI 中，如何让我的 Grid 项目占用 100% 的可用水平空间，而不会换行到下一行？

Posted 2023-02-22

【中文标题】在 React 和 Material-UI 中，如何让我的 Grid 项目占用 100% 的可用水平空间，而不会换行到下一行？

【英文标题】：In React and Material-UI how do I make my Grid items take up 100% of available horizontal space w/o wrapping to the next row?

【发布时间】：2020-09-03 09:18:29

【问题描述】：

我在 React 16.10 应用程序中使用 Material-UI。我想在左栏中显示一个带有图标的表格，然后在右栏中显示一个标签和地址，它们彼此堆叠在一起。我希望右栏中的项目占用 100% 的可用空间。所以我有这门课

fullWidth: 
    backgroundColor: "red",
    width: "100%",
  ,

（背景颜色只是让我可以看到发生了什么）。我创建了这张表...

          <Grid container direction="row" alignItems="top" spacing=1 className=classes.fullWidth>
            <Grid item>
              <LocationOnIcon />
            </Grid>
            <Grid item>
              <Grid container direction="column" alignItems="center">
                <Grid item className=classes.fullWidth style=backgroundColor: "yellow">
                  <TextField
                    className=`$classes.rootInput $classes.input`
                    id="pickupLocationLabel"
                    value=values.pickUpLocationLabel
                    placeholder="Label"
                    variant="outlined"
                    disabled=false
                    onChange=handleChangePickUpLocationLabel
                    fullWidth
                  />
                </Grid>
                <Grid item className=classes.fullWidth>
                  <AddressInput
                    className=classes.textField
                    placeholder=values.pickUpLocation?.address
                    stage=values.pickUpLocation
                    setStage=handleChangeLocation.bind(null, "pickUpLocation")
                    setLocation=handleChangeLocation
                  />
                </Grid>
              </Grid>
            </Grid>
          </Grid>

但是，这些项目并没有占据可用宽度的 100% ...

当我将 fullWidth 类添加到父容器时，

          <Grid container direction="row" alignItems="top" spacing=1 className=classes.fullWidth>
            <Grid item>
              <LocationOnIcon />
            </Grid>
            <Grid item className=classes.fullWidth>
              <Grid container direction="column" alignItems="center">
                <Grid item className=classes.fullWidth style=backgroundColor: "yellow">
                  <TextField
                    className=`$classes.rootInput $classes.input`
                    id="pickupLocationLabel"
                    value=values.pickUpLocationLabel
                    placeholder="Label"
                    variant="outlined"
                    disabled=false
                    onChange=handleChangePickUpLocationLabel
                    fullWidth
                  />
                </Grid>
                <Grid item className=classes.fullWidth>
                  <AddressInput
                    className=classes.textField
                    placeholder=values.pickUpLocation?.address
                    stage=values.pickUpLocation
                    setStage=handleChangeLocation.bind(null, "pickUpLocation")
                    setLocation=handleChangeLocation
                  />
                </Grid>
              </Grid>
            </Grid>
          </Grid>

然后项目不再与图标排列在一起。

如何调整它们以使其占用 100% 的可用宽度而不换行到下一行？

【参考方案1】：

为什么使用classes.fullWidth 来确定@​​987654323@ 的大小？ Material-UI 提供了一个Bootstrap 类型系统，允许您根据屏幕大小调整 Grid 中项目的大小。查看Grid APIdocumentation。

尝试放弃 classes.fullWidth 并用 xs=12 替换它，看看是否能解决问题并让元素占据整个宽度。

还有一个 wrap/nowrap 属性可以传递给 Grid 项来处理包装。

【讨论】：

这有时似乎不起作用，我似乎无法弄清楚为什么。我最终不得不用 classes.fullWidth 替换 xs=12。