React+MUI网格系统输入框垂直间距及尺寸调整问题

一、给输入框行添加垂直间距 #

你当前的结构里，外层Grid容器默认是横向布局，四个内层的横向Grid直接堆叠在一起，自然没有垂直间距。只需两步修改：

• 外层Grid设置direction="column"，让子元素垂直排列
• 给外层Grid加spacing属性，数值按需调整（MUI会自动把spacing转为对应间距）
• 每个内层的横向Grid要作为外层Grid的item，这样spacing才会生效

二、统一DesktopDatePicker输入框尺寸 #

生日输入框比其他输入框大，是因为DesktopDatePicker渲染的TextField默认样式和你用FormControl+OutlinedInput的组合不一致。可以这样调整：

• 在renderInput的TextField里加size="small"，和其他输入框尺寸对齐
• 也可以用FormControl把TextField包起来，完全统一样式
• 要是还不满意，直接用sx属性指定宽度，比如sx={{ width: 200 }}

修改后的完整代码 #

<Card>
  <CardContent>
    {/* 外层Grid配置垂直方向与间距 */}
    <Grid container direction="column" spacing={3}>
      <Grid item>
        <Grid container spacing={6}>
          <Grid item>
            <FormControl>
              <InputLabel htmlFor="component-outlined">Name</InputLabel>
              <OutlinedInput id="component-outlined" label="Name" />
            </FormControl>
          </Grid>
          <Grid item>
            <FormControl>
              <InputLabel htmlFor="component-outlined">Last name</InputLabel>
              <OutlinedInput id="component-outlined" label="Last name" />
            </FormControl>
          </Grid>
          <Grid item>
            <LocalizationProvider dateAdapter={AdapterDayjs}>
              <DesktopDatePicker
                label="Birthdate"
                inputFormat="MM/DD/YYYY"
                value={value}
                onChange={handleChange}
                renderInput={params => (
                  {/* 添加size="small"统一尺寸 */}
                  <TextField {...params} size="small" />
                )}
              />
            </LocalizationProvider>
          </Grid>
        </Grid>
      </Grid>
      <Grid item>
        <Grid container spacing={6}>
          <Grid item>
            <FormControl>
              <InputLabel htmlFor="component-outlined">Street</InputLabel>
              <OutlinedInput id="component-outlined" label="Street" />
            </FormControl>
          </Grid>
          <Grid item>
            <FormControl>
              <InputLabel htmlFor="component-outlined">Postal code</InputLabel>
              <OutlinedInput id="component-outlined" label="Postal code" />
            </FormControl>
          </Grid>
          <Grid item>
            <FormControl>
              <InputLabel htmlFor="component-outlined">City</InputLabel>
              <OutlinedInput id="component-outlined" label="City" />
            </FormControl>
          </Grid>
        </Grid>
      </Grid>
      <Grid item>
        <Grid container spacing={6}>
          <Grid item>
            <FormControl>
              <InputLabel htmlFor="component-outlined">Country</InputLabel>
              <OutlinedInput id="component-outlined" label="Country" />
            </FormControl>
          </Grid>
          <Grid item>
            <FormControl>
              <InputLabel htmlFor="component-outlined">Gender</InputLabel>
              <OutlinedInput id="component-outlined" label="Gender" />
            </FormControl>
          </Grid>
          <Grid item>
            <FormControl>
              <InputLabel htmlFor="component-outlined">Email</InputLabel>
              <OutlinedInput id="component-outlined" label="Email" />
            </FormControl>
          </Grid>
        </Grid>
      </Grid>
      <Grid item>
        <Grid container spacing={6}>
          <Grid item>
            <FormControl>
              <InputLabel htmlFor="component-outlined">Level of trust</InputLabel>
              <OutlinedInput id="component-outlined" label="Level of trust" />
            </FormControl>
          </Grid>
          <Grid item>
            <FormControl>
              <InputLabel htmlFor="component-outlined">Last signed in</InputLabel>
              <OutlinedInput id="component-outlined" label="Last signed in" />
            </FormControl>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  </CardContent>
</Card>

额外说明 #

• 外层Grid的spacing={3}对应24px间距（MUI的spacing单位是8px），可以根据视觉需求修改数值
• 要是需要更灵活的间距控制，也可以给每个内层Grid的item加sx={{ mb: 2 }}（mb是margin-bottom），但用Grid的spacing更符合MUI的布局规范
• 若size="small"还是没完全匹配，直接给TextField加sx={{ width: 180 }}指定固定宽度即可

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