Material-UI：如何制作對齊的表格

Question

我是 Material-UI 的新手。 通常如何構建一個表單，其中一些字段水平分組，而另一些字段垂直堆疊，並且所有字段在垂直和水平方向上都很好地對齊？ 請參閱以下示例圖片：

我知道如何使用純 HTML 表格構建這種表單，但“正確”的 Material-UI 方式是什么？ 示例代碼會很好。

Answer 1

這里有前兩行的示例：

<form>
<Grid container>
  <Grid item xs="12">
    <TextField id="standard-basic" label="Standard"/>
  </Grid>
</Grid>

<Grid container>
  <Grid item xs="8">
    <TextField id="standard-basic" label="Standard"/>
  </Grid>
  <Grid item xs="4">
    <TextField id="standard-basic" label="Standard"/>
  </Grid>
</Grid>
</form>