React中Material UI Grid2无法上下排列问题求助

核心问题是Grid容器默认flex方向为横向（row），且你混用了Grid v1和Grid2（v2）组件，可能导致布局逻辑冲突。以下是两种可靠修复方案：

方案1：统一使用Grid2并设置纵向布局 #

将外层容器替换为Grid2，显式设置direction="column"让子元素纵向排列，同时通过alignItems="center"保证内容水平居中：

import Grid2 from "@mui/material/Unstable_Grid2/Grid2";

<Grid2 container sx={{ marginTop: "5%" }} direction="column" alignItems="center">
    <Grid2 item xs={12}>
    <Divider />
    <Stack spacing={2} direction="column" alignItems="center">
      <h3 style={{ textAlign: "center" }}>
        Wurde Ihnen schon mal durch eigenes Verschulden ein Mietverhältnis gekündigt
      </h3>

      <Stack direction="row" spacing={4}>
        <FormControlLabel
          control={
            <Checkbox
              checked={question1 === "ja"}
              onChange={() => setQuestion1("ja")}
            />
          }
          label="Ja"
        />
        <FormControlLabel
          control={
            <Checkbox
              checked={question1 === "nein"}
              onChange={() => setQuestion1("nein")}
            />
          }
          label="Nein"
        />
      </Stack>
    </Stack>
  </Grid2>

  <Grid2 item xs={12} sx={{ marginTop: 2 }}>
    <Divider />
    <Stack spacing={2} direction="column" alignItems="center">
      <h3 style={{ textAlign: "center" }}>
        Haben Sie aktuell eine Anstellung mit unbefristetem Arbeitsvertrag
      </h3>

      <Stack direction="row" spacing={4}>
        <FormControlLabel
          control={
            <Checkbox
              checked={question2 === "ja"}
              onChange={() => setQuestion2("ja")}
            />
          }
          label="Ja"
        />
        <FormControlLabel
          control={
            <Checkbox
              checked={question2 === "nein"}
              onChange={() => setQuestion2("nein")}
            />
          }
          label="Nein"
        />
      </Stack>
    </Stack>
  </Grid2>
</Grid2>

方案2：使用Grid v1并确保自动换行 #

如果坚持用Grid v1，显式设置wrap="wrap"（默认值，但显式设置避免异常），每个xs={12}的item会自动占满一行触发换行：

import Grid from "@mui/material/Grid";

<Grid container style={{ marginTop: "5%" }} justifyContent="center" wrap="wrap">
    <Grid item xs={12}>
    {/* 第一个问题的内容 */}
    </Grid>

    <Grid item xs={12}>
    {/* 第二个问题的内容 */}
    </Grid>
</Grid>

额外优化提示 #

• 移除h3标签上无效的justifyContent/alignContent属性，这些是flex容器属性，h3不是flex容器，用textAlign="center"实现文字居中更合适。
• 第二个问题的Checkbox绑定了question1状态，应改为question2，避免两个问题共享同一状态导致逻辑混乱。

内容的提问来源于stack exchange，提问作者Captai-N