如何在 Material UI 中布局表单？

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>

Answer 2

我已经为你创建了一个有效的codesandbox。

这里是代码。

function App() {
  return (
    <Form>
      <Grid
        container
        direction="row"
        justify="flex-start"
        alignItems="flex-start"
        spacing={1}
      >
        Form
        <Grid container xs="12" spacing="1">
          <Grid item>
            <TextField name="Field1" value="Field1" />
          </Grid>
          <Grid item>
            <TextField name="Field2" value="Field2" />
          </Grid>
        </Grid>
        <Grid container xs={12}>
          <Grid item xs={4} sm={4}>
            <TextField
              fullWidth
              multiline
              value="Field1"
              label="Multiline"
              rows="6"
              defaultValue="Default Value"
            />
          </Grid>
          <Grid item xs={8} sm={8}>
            <Grid container>
              <Grid item>
                <TextField name="Popup_A1" fullWidth select />
              </Grid>
              <Grid item>
                <TextField name="Popup_A2" fullWidth select />
              </Grid>
            </Grid>
            <Grid container>
              <Grid item>
                <TextField name="Popup_A1" fullWidth select />
              </Grid>
              <Grid item>
                <TextField name="Popup_A2" fullWidth select />
              </Grid>
            </Grid>
            <Grid container>
              <Grid item>
                <TextField name="Popup_A1" fullWidth select />
              </Grid>
              <Grid item>
                <TextField name="Popup_A2" fullWidth select />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Form>
  );
}