Material UI：如何对齐不同的表单元素，包括连续的选择器？答案

【问题标题】：Material UI: How to align different form elements including pickers in a row?Material UI：如何对齐不同的表单元素，包括连续的选择器？
【发布时间】：2021-05-23 19:15:45
【问题描述】：

我对材料 ui 非常陌生，如果已涵盖此内容，我深表歉意。我发现了一些类似的问题，但没有一个可以展示具有多种表单字段类型的解决方案。

我发现材料 ui 日期选择器与文本字段不正确对齐

代码：

  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Grid container direction={'row'} alignItems={'center'}>
      <Grid item>
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          inputVariant="outlined"
          format="dd-MM-yyyy"
          margin="normal"
          id="date1"
          value={'12-09-2021'}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
          size="small"
          required
        />
      </Grid>
      <Grid item>
        <TextField id="text1" size="small" variant="outlined" required />
      </Grid>
      <Grid item>
        <TextField id="text2" size="small" variant="outlined" required />
      </Grid>
    </Grid>
  </MuiPickersUtilsProvider>

这就是它的样子：

添加表单标签和帮助文本只会加剧问题。

有什么方法可以让这些表单域很好地并排播放？

【问题讨论】：

标签： css reactjs typescript material-ui

【解决方案1】：

您已将margin="normal" 添加到KeyboardDatePicker。您还需要为其他元素添加相同的边距。我还为 Grid 容器添加了justify: {'space-evenly'}。

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Grid container direction={'row'} alignItems={'center'} justify={'space-evenly'}>
      <Grid item>
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          inputVariant="outlined"
          format="dd-MM-yyyy"
          margin="normal"
          id="date1"
          value={'12-09-2021'}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
          size="small"
          required
        />
      </Grid>
      <Grid item>
        <TextField id="text1" size="small" variant="outlined" margin="normal" required />
      </Grid>
      <Grid item>
        <TextField id="text2" size="small" variant="outlined" margin="normal" required />
      </Grid>
    </Grid>
</MuiPickersUtilsProvider>

Codesandbox Demo

【讨论】：