MUI Select组件标签隐藏失效如何解决？

问题原因 #

你配置的inputProps={{ 'aria-label': 'Without label' }}仅用于无障碍属性标识，不会作用于组件显示层面的标签隐藏逻辑。MUI的<FormControl>组件默认会为内部嵌套的表单元素预留标签的显示布局空间，如果你没有显式传入label参数且需要完全隐藏标签相关的占位区域，需要主动配置对应属性。

修复方案 #

给外层的<FormControl>添加hiddenLabel属性即可，修改后完整代码如下：

<FormControl fullWidth hiddenLabel>
  <Select
    value={selectedEntry}
    onChange={(e) => handleSelectEntry(e.target.value)}
    inputProps={{ 'aria-label': 'Without label' }}
  >
    {dropDownList?.map((entry) => (
      <MenuItem key={entry.key} value={entry.key}>{entry.value}</MenuItem>
    ))}
  </Select>
</FormControl>

修改后FormControl不会再为标签预留高度位置，保留的aria-label属性可正常支持无障碍访问，符合WAI-ARIA规范要求。

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