MUI DateTimePicker标签无法垂直居中问题求助

嗨，我来帮你排查这个DateTimePicker标签不垂直居中的问题～

你遇到的情况大概率是因为：当你手动设置了size: 'small'和自定义13px字号后，MUI默认的InputLabel垂直布局样式（比如行高、内边距）和你的自定义字体大小不匹配，导致标签和输入框内容的垂直位置错位了。结合你的代码，给你几个针对性的解决方法：

• 直接调整InputLabelProps的垂直对齐样式
  在你现有的InputLabelProps里，补充垂直居中和行高的设置，强制让标签和输入框内容对齐：

InputLabelProps: {
  style: {
    fontSize: '13px',
    alignSelf: 'center', // 强制标签在容器内垂直居中
    lineHeight: '1', // 匹配small尺寸的紧凑行高，避免文字额外撑开高度
    paddingTop: 0, // 移除默认可能存在的上边距偏移
  },
}

• 用sx统一控制TextField的标签和输入框样式
  MUI更推荐用sx来覆盖组件样式，你可以把原来分散的style配置合并到sx里，统一调整标签区域的布局：

slotProps: {
  textField: {
    fullWidth: true,
    variant: 'outlined',
    size: 'small',
    required,
    disabled,
    sx: {
      ...style,
      fontSize: '13px',
      // 直接针对InputLabel设置样式
      '.MuiInputLabel-root': {
        alignSelf: 'center',
        lineHeight: 'inherit',
        fontSize: '13px',
      },
      // 同步调整输入框的内边距，和标签高度匹配
      '.MuiOutlinedInput-input': {
        fontSize: '13px',
        padding: '8px 14px',
      },
    },
    InputProps: {
      sx: {
        '&.Mui-disabled': {
          color: '#777777',
          WebkitTextFillColor: '#777777',
        },
      },
    },
  },
}

• 排查全局样式污染
  如果上面的方法都没效果，记得检查一下项目里的全局CSS有没有给label、.MuiInputLabel-root这类选择器设置额外的margin、padding或者line-height，这些全局样式也可能导致标签错位。

可以先试试第一个方案，快速验证效果，如果不行再用第二个方法统一控制，应该就能解决标签垂直居中的问题啦～

内容来源于stack exchange