时间戳

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

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

问题描述

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

然后项目不再在图标旁边排列。

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

标签： cssreactjsgridmaterial-uiwidth

解决方案

你为什么用它classes.fullWidth来调整尺寸Grid items？Material-UI 提供了一个Bootstrap类型系统，允许您根据屏幕大小调整 Grid 中项目的大小。查看Grid API 文档。

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

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

推荐阅读