javascript - 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>