如何让React表单中每个MUI TextField输入框占满整行宽度？

我使用Material UI和React开发表单，采用Grid布局结构，每个输入框都包裹在Grid item中，理论上应占满整行宽度。但实际输入框居中显示，仅占据部分宽度，未达预期效果。

问题代码 #

return (
<Box
  sx={{
    height: "100vh",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  }}
>
  <Card sx={{ maxWidth: 500, width: "100%", p: 3, boxShadow: 4 }}>
    <CardContent>
      <CssBaseline />
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5" gutterBottom>
          Sign in
        </Typography>
        {success && (
          <Alert severity="success" sx={{ mb: 2 }}>
            Successfully logged in!
          </Alert>
        )}
        {error && (
          <Alert severity="error" sx={{ mb: 2 }}>
            {error}
          </Alert>
        )}

        <Box
          component="form"
          onSubmit={handleSubmit}
          noValidate
          sx={{ mt: 3, width: "100%" }}
        >
          <Grid container spacing={2}>
            {
              [
                { name: "email", label: "Email Address", required: true },
                {
                  name: "password",
                  label: "Password",
                  type: "password",
                  required: true,
                },
              ].map(({ name, label, type, required }) => (
                <Grid item xs={12} key={name}>
                  <TextField
                    variant="outlined"
                    fullWidth
                    id={name}
                    name={name}
                    label={label}
                    type={type || "text"}
                    required={!!required}
                    value={form[name as keyof typeof form]}
                    onChange={handleChange}
                  />
                </Grid>
              ))
            }
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            sx={{ mt: 3, mb: 2 }}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="/forgot-password" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="/register" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </Box>
      </Box>
    </CardContent>
  </Card>
</Box>
)

解决方案 #

问题根源在于外层包含表单的Box设置了alignItems: "center"：当父容器使用flex-direction: column时，align-items: center会让所有子元素的宽度收缩至内容宽度，即便子元素设置了width: 100%也无法生效，这就导致表单里的输入框只能占据部分宽度。

你可以通过以下两种方式解决：

方式一：移除外层Box的alignItems: "center" #

直接删除外层Box的alignItems配置，让子元素默认撑满父容器宽度：

<Box
  sx={{
    display: "flex",
    flexDirection: "column",
    // 移除alignItems: "center"
  }}
>

方式二：给表单Box添加alignSelf: "stretch" #

保留外层Box的原有样式，给表单Box单独设置alignSelf: "stretch"，覆盖父容器的align-items配置，让表单撑满父容器宽度：

<Box
  component="form"
  onSubmit={handleSubmit}
  noValidate
  sx={{ mt: 3, width: "100%", alignSelf: "stretch" }}
>

两种方式都能让Grid和TextField正常占满整行宽度，达到预期效果。

内容的提问来源于stack exchange，提问作者Salah Benkhanous