Question

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

Answer 1

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

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

Answer 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>

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

2 个答案: