如何更改网格内的输入宽度？答案

【问题标题】：How to change the input width inside a grid?如何更改网格内的输入宽度？
【发布时间】：2019-03-18 01:53:21
【问题描述】：

我在网格容器中创建了一个表单，并在每个网格项中放置了一个 TextField。但是当我更改网格项的大小时；例如，当我输入 xs={10} 或 xs={8} 时。 TextField 的宽度没有改变。上面的参考重定向到我的复制示例reproduction。我认为我犯了一个愚蠢的错误，但我不知道在哪里。我该如何解决？

【问题讨论】：

在具有“列”方向的容器中使用xs={10} 无效：next.material-ui.com/layout/grid/…（此文档适用于 v4，但也适用于 v3）。您希望这些文本字段如何布局？并排还是一个在另一个之上？
如果你想让它们占据更多的宽度，你可以在容器网格上使用alignContent="stretch"（以及在TextField上使用fullWidth）而不是alignContent="center"。

标签： reactjs material-ui

【解决方案1】：

您可以使用材质 UI 文本字段的fullWidth 属性：

<TextField
  label="Email"
  type="email"
  margin="normal"
  variant="outlined"
  fullWidth
/>

【讨论】：

【解决方案2】：

主要思想是使用“fullWidth”属性。您应该将 alignContent="center" 更改为 alignContent="stretch" 或将其删除，因为“stretch”是 alignContent 的默认值。此外，删除 xs={10} 电子邮件网格项目。

<Paper className={classes.paper}>
    <Grid
        container
        justify="center"
        direction="column"
    >
        <Grid item>
            <TextField
                label="Email"
                type="email"
                margin="normal"
                variant="outlined"
                fullWidth
            />
        </Grid>
        <Grid item>
            <TextField
                label="Password"
                type="password"
                margin="normal"
                variant="outlined"
                fullWidth
            />
        </Grid>
    </Grid>
</Paper>

【讨论】：