如何在 MaterialUI 中布局表单？

Question

我正在尝试使用 MaterialUI Grid 组件和字段构建以下表单布局：

+-----------------------------------------+
|Form                                     |
|                                         |
| +--------------+ +----------------+     |
| |Field_1       | |Field_2         |     |
| +--------------+ +----------------+     |
| +--------------+ +---------+ +--------+ |
| |TextArea      | |Popup_A1 | |Popup_A2| |
| |              | +---------+ +--------+ |
| |              | +---------+ +--------+ |
| |              | |Popup_B1 | |Popup_B2| |
| |              | +---------+ +--------+ |
| |              | +---------+ +--------+ |
| |              | |Popup_C1 | |Popup_C2| |
| |              | +---------+ +--------+ |
| |              |                        |
| +--------------+                        |
+-----------------------------------------+

我的理解可能有点不稳定，弹出窗口显示为最小方块。页面结构如下（简化）：

<Form>
  <Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={1}>
    <Grid container xs="12" spacing="1">
      <Grid item xs={12} sm={6}>
        <Field name="Field1" ... fullWidth />
      </Grid>
      <Grid item xs={12} sm={6}>
        <Field name="Field2" ... fullWidth />
      </Grid>
    </Grid>
    <Grid container xs={12} >
      <Grid container xs={4} sm={4} >
        <Field  fullWidth multiline component={TextField} />
      </Grid>

      <Grid container xs={8} sm={8}>
        <Grid container >
          <Grid item>
            <TextField name="Popup_A1" fullWidth select>
              <MenuItem key="1" value="1">
                Large Text
              </MenuItem>
              <MenuItem key="2" value="2">
                Ooh Some Large Text
              </MenuItem>
              <MenuItem key="3" value="3">
                Another Large Text Choice
              </MenuItem>
              <MenuItem key="4" value="4">
                No, LOOOONG Text
              </MenuItem>
            </TextField>
          </Grid>
          <Grid item>
            <TextField name="Popup_A2" fullWidth select>
              <MenuItem key="1" value="1">
                Large Text
              </MenuItem>
              <MenuItem key="2" value="2">
                Ooh Some Large Text
              </MenuItem>
              <MenuItem key="3" value="3">
                Another Large Text Choice
              </MenuItem>
              <MenuItem key="4" value="4">
                No, LOOOONG Text
              </MenuItem>
            </TextField>
          </Grid>
        </Grid>
      </Grid>

      <Grid container xs={8} sm={8}>
        <Grid container >
          <Grid item>
            <Field name="Popup_B1" ... fullWidth select >....</Field>
          </Grid>
          <Grid item>
            <Field name="Popup_B2" ... fullWidth select >....</Field>
          </Grid>
        </Grid>
      </Grid>

      ...

    </Grid>
 </Grid>
</Form>

有人能把我从痛苦中解脱出来，让我知道我做错了什么，或者可能给我指出这样的结构形式的资源吗？

---

编辑

我已经将MenuItem元素添加到 Venkovsky 非常有用的代码沙箱中......它准确地说明了我的意思。弹出窗口非常非常狭窄。:-(

Answer 1

以防万一其他人遇到类似问题，这里是有效代码的基础知识。我认为问题是将字段包装在<Grid item sm={6}>'s 中：

<Form>
  <Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={1}>
    <Grid container spacing={1}>
      <Grid item sm={6}>
        <Field name="requestor" ... />
      </Grid>
      <Grid item sm={6}>
        <Field name="status" .../>
      </Grid>
    </Grid>
    <Grid container >
      <Grid item sm={3}>
        <Field name="materials" type="text" label="Materials" variant="outlined" rowsMax={10} rows={20} margin="normal" fullWidth multiline  ... />
      </Grid>
      <Grid item sm={1}>
      </Grid>
      <Grid item sm={8}>
        <Grid container spacing={1}>
          <Grid item sm={6}>
            <TextField name="reviewer_2" ... />
          </Grid>
          <Grid item sm={6}>
            <TextField name="approver_1" ... />
          </Grid>
        </Grid>
        <Grid container spacing={1}>
          <Grid item sm={6}>
            <TextField name="reviewer_2" ... />
          </Grid>
          <Grid item sm={6}>
          <TextField name="approver_2" ... />
          </Grid>
        </Grid>
        <Grid container spacing={1}>
          <Grid item sm={6}>
            <TextField name="reviewer_3" ... />
          </Grid>
          <Grid item sm={6}>
            <TextField name="approver_3" ... />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
    <Button type="submit" > Submit </Button>
  </Grid>
</Form>