MUI v5 Select组件variant为filled时选中项文本垂直不对齐如何解决

问题原因 #

MUI v5 中 variant="filled" 的 Select 组件默认会为顶部的标签位预留顶部内边距，当你没有为组件传入 label 属性时，这部分多余的顶部留白会把选中项文本向下挤压，最终出现文本偏靠底部、和下拉箭头不对齐的异常。

修复方案 #

方案1：添加hiddenLabel属性（最简便）

直接在Select组件上添加hiddenLabel属性即可，该属性会通知组件无需预留标签位，自动清除多余的顶部内边距，让文本垂直对齐恢复正常。
代码修改示例：

<Select variant="filled" value={0} hiddenLabel>
  <MenuItem value={0}>user preference</MenuItem>
  <MenuItem value={1}>light</MenuItem>
  <MenuItem value={2}>dark</MenuItem>
</Select>

方案2：自定义样式覆盖

如果你需要更精细的调整对齐效果，可以通过sx属性直接覆盖内置样式：

<Select 
  variant="filled" 
  value={0}
  sx={{
    '& .MuiFilledInput-input': {
      paddingTop: '16px',
      paddingBottom: '16px'
    }
  }}
>
  <MenuItem value={0}>user preference</MenuItem>
  <MenuItem value={1}>light</MenuItem>
  <MenuItem value={2}>dark</MenuItem>
</Select>

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