对齐不同长度的材质 UI 网格项目

Question

我目前有一个材质 ui 网格系统，如下所示：

<>
      <Typography gutterBottom variant='h6'>
        Add New User{' '}
      </Typography>
      <Grid container spacing={3} alignItems='center' justify='center'>
        <Grid item>
          <Typography variant='body2'>Full name</Typography>
        </Grid>
        <Grid item>
          <TextField
            style={{ width: 400 }}
            fullWidth
            margin='dense'
            id='outlined-basic'
            label='Full name'
            variant='outlined'
          />
        </Grid>
      </Grid>
      <Grid container spacing={3} alignItems='center' justify='center'>
        <Grid item>
          <Typography variant='body2'>Email</Typography>
        </Grid>
        <Grid item>
          <TextField
            style={{ width: 400 }}
            fullWidth
            margin='dense'
            id='outlined-basic'
            label='Email'
            variant='outlined'
          />
        </Grid>
      </Grid>
</>

我注意到因为 email 和全名的长度不同，所以网格项没有按照我希望的方式对齐。 它们目前如下所示：

我希望网格如下所示：

有没有办法像底部图片一样对齐网格项目而无需添加固定宽度？ 这似乎是我找到的唯一解决方案，但我觉得我错过了有关网格系统的一些东西。

附件是用于调试的代码沙箱https://codesandbox.io/s/affectionate-bhabha-ur9nm?file=/src/App.js

Answer 1

我已经为 text-field 添加了xs={9}并为 label 添加了xs={3} ， style={{ textAlign: 'right' }} （不熟悉 material-ui 所以不知道是否有更好的方法应用这个）。

结果如下： https://codesandbox.io/s/hungry-euclid-n7y8f

Answer 2

您只需将xs sm lg添加到Grid组件即可利用Auto layout 。 根据文档：

自动布局使项目公平地共享可用空间。

应用此更改后，您的项目将正确对齐。 您还可以在沙箱中检查更正的版本。