javascript - Material-UI：如何制作对齐的表单

Question

我是 Material-UI 的新手。通常如何构建一个表单，其中一些字段水平分组，而其他字段垂直堆叠，并且所有字段在垂直和水平方向上都很好地对齐？请参见以下示例图片：

我知道如何使用纯 HTML 表格构建这种表单，但“正确”的 Material-UI 方式是什么？示例代码会很好。

标签： javascripthtmlcssreactjsmaterial-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>