为什么我的代码在网格中没有垂直排列？

Question

我正在使用 React 和 MaterialUI 进行开发。我遇到了一个奇怪的问题，元素无法垂直对齐。我通常从事后端工作，所以对前端开发，尤其是网格方面的知识几乎一无所知。以下代码未垂直对齐项目的原因可能是什么？

<Grid
  container
  direction="column"
  justifyContent="center"
  alignItems="center"
>
  <Box
    component="form"
    sx={{ "& > :not(style)": { m: 1, width: "25ch" } }}
    noValidate
    autoComplete="off"
  >
    <TextField id="standard-basic" label="Email" variant="standard" />
    <FormControl sx={{ m: 1, width: "25ch" }} variant="standard">
      <InputLabel htmlFor="standard-adornment-password">
        Password
      </InputLabel>
      <Input
        id="standard-adornment-password"
        type={showPassword ? "text" : "password"}
        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
              onClick={handleClickShowPassword}
              onMouseDown={handleMouseDownPassword}
            >
              {showPassword ? <VisibilityOff /> : <Visibility />}
            </IconButton>
          </InputAdornment>
        }
      />
    </FormControl>
  </Box>
</Grid>

我想垂直排列电子邮件地址和密码的输入栏。

Answer 1

查看您的代码，您的 Box 组件导致您无法垂直堆叠元素。

如果您愿意使用 Flex 模型而不是网格系统，您可以将其实现为垂直堆叠，如下所示：

<Box
    component="form"
    sx={{
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      "& > :not(style)": { m: 1, width: "25ch" },
    }}
    noValidate
    autoComplete="off"
  >
    <TextField id="standard-basic" label="Email" variant="standard" />
    <FormControl sx={{ m: 1, width: "25ch" }} variant="standard">
      <InputLabel htmlFor="standard-adornment-password">
        Password
      </InputLabel>
      <Input
        id="standard-adornment-password"
        type={"password"}
        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="toggle password visibility"
            ></IconButton>
          </InputAdornment>
        }
      />
    </FormControl>
  </Box>