React MUI v5 Grid间距不均：如何实现合理间距布局？

问题说明 #

使用设置了spacing={2}的MUI v5 Grid容器构建表单，每行包含2个TextField组件时，发现间距仅作用于每个TextField的左侧，每行第二个TextField的右侧无对应间距。需要实现以下两种效果之一：

• 仅在每行的两个TextField之间添加间距
• 让每行第二个TextField的右侧也应用相同间距

原始代码示例 #

return (
    <form onSubmit={handleSubmit}>
      <Grid
        container
        spacing={2}
        width='60%'
        margin='auto'
        bgcolor='green'
        justifyContent='center'
      >
        <Grid item xs={12} md={6}>
          <TextField
            label='Name'
            name='name'
            value={formState.name}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Phone No'
            name='phoneNo'
            value={formState.phoneNo}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Address'
            name='address'
            value={formState.address}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Job Role'
            name='job.jobRole'
            value={formState.job?.jobRole}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Join Date'
            name='job.joinDate'
            type='date'
            value={formState.job?.joinDate}
            onChange={handleChange}
            fullWidth
            InputLabelProps={{ shrink: true }}
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Resign Date'
            name='job.resignDate'
            type='date'
            value={formState.job?.resignDate}
            onChange={handleChange}
            fullWidth
            InputLabelProps={{ shrink: true }}
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Basic Pay'
            name='job.basicPay'
            type='number'
            value={formState.job?.basicPay}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Conveyance Allowance'
            name='job.conveyanceAllowance'
            type='number'
            value={formState.job?.conveyanceAllowance}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Medical Allowance'
            name='job.medicalAllowance'
            type='number'
            value={formState.job?.medicalAllowance}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Specialization Allowance'
            name='job.specializationAllowance'
            type='number'
            value={formState.job?.specializationAllowance}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} textAlign='center'>
          <Button type='submit' variant='contained' color='primary'>
            Save
          </Button>
        </Grid>
      </Grid>
    </form>
  )

解决方案 #

方案一：仅在每行两个TextField之间添加间距 #

取消Grid容器的全局spacing，针对每行第一个TextField所在的Grid Item添加右侧间距（仅在中等及以上屏幕生效）：

return (
    <form onSubmit={handleSubmit}>
      <Grid
        container
        spacing={0}
        width='60%'
        margin='auto'
        bgcolor='green'
        justifyContent='center'
      >
        {/* 给每行第一个md布局的Item添加右侧间距 */}
        <Grid item xs={12} md={6} sx={{ '&:nth-of-type(2n-1)': { mr: { md: 2 } } }}>
          <TextField
            label='Name'
            name='name'
            value={formState.name}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Phone No'
            name='phoneNo'
            value={formState.phoneNo}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        {/* 其余md:6的Item重复相同的sx规则 */}
        <Grid item xs={12} md={6} sx={{ '&:nth-of-type(2n-1)': { mr: { md: 2 } } }}>
          <TextField
            label='Address'
            name='address'
            value={formState.address}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Job Role'
            name='job.jobRole'
            value={formState.job?.jobRole}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        {/* 其余字段保持不变 */}
        <Grid item xs={12} textAlign='center'>
          <Button type='submit' variant='contained' color='primary'>
            Save
          </Button>
        </Grid>
      </Grid>
    </form>
)

通过&:nth-of-type(2n-1)选择每行第一个Item，仅在md及以上屏幕添加margin-right: 2（与原spacing单位一致），实现仅两个TextField之间有间距的效果。

方案二：让每行第二个TextField右侧也应用相同间距 #

给Grid容器添加水平方向的padding，抵消Grid容器默认的负margin，使左右两侧都产生与中间一致的间距：

<Grid
  container
  spacing={2}
  width='60%'
  margin='auto'
  bgcolor='green'
  justifyContent='center'
  sx={{ px: 2 }} {/* 添加与spacing值一致的水平padding */}
>
  {/* 所有Item和TextField保持原始代码不变 */}
</Grid>

MUI Grid的spacing会给容器添加负margin，同时给Item添加左侧padding。添加px:2后，容器的左右padding抵消负margin的影响，使第二个TextField右侧也形成与中间一致的间距，整体布局对称。

内容的提问来源于stack exchange，提问作者Zeref