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

问题描述

我目前有一个材质 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>
</>

我注意到，由于电子邮件和全名的长度不同，网格项并没有按照我希望的方式对齐。它们目前如下所示：

我希望网格如下所示：

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

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

标签： javascriptcssreactjsmaterial-ui

我已经xs={9}为文本字段和xs={3}标签添加了style={{ textAlign: 'right' }}（不熟悉material-ui，所以不知道是否有更好的方法来应用它）。

这是结果：https ://codesandbox.io/s/hungry-euclid-n7y8f

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

问题描述

解决方案

推荐阅读