在React和material-ui中，如何使我的Grid项占用不包装到nexet行的可用水平空间的100％？

Question

我在React 16.10应用程序中使用materialUI。我想在左列中显示一个带有图标的表格，然后在右列中彼此重叠的放置一个标签和地址。我希望右栏中的项目占用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％，而不包装到下一行？

Answer 1

为什么使用classes.fullWidth来确定Grid items的大小？ Material-UI提供了Bootstrap类型的系统，该系统使您可以根据屏幕的大小来调整网格中项目的大小。签出Grid API documentation。

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

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