對齊不同長度的材質 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 。 根據文檔：

自動布局使項目公平地共享可用空間。

應用此更改后，您的項目將正確對齊。 您還可以在沙箱中檢查更正的版本。