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

Question

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

\n

fullWidth:\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0backgroundColor:\xc2\xa0"red",\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0width:\xc2\xa0"100%",\n\xc2\xa0\xc2\xa0},\n

\n

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

\n

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

\n

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

\n

\n

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

\n

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

\n

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

\n

\n如何调整内容，使其占据 100% 的可用宽度而不换行到下一行？

\n

Answer 1

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

尝试放弃classes.fullWidth并替换它xs=12，看看这是否有效并让元素占据整个宽度。

您还wrap/nowrap可以将一个 prop 传递给 Grid 项目来处理换行。