如何在Material UI中正确对齐InputLabel并解决选项与标签重叠问题

你遇到的是Material UI Select组件的标签显示异常问题，修复方式如下：

异常现象参考 #

问题根因 #

• Select组件未绑定value属性，无法感知选中状态，不会自动触发标签上浮逻辑
• Select的label属性值与InputLabel的文本不一致，导致标签收缩偏移量计算错误

修复后完整代码 #

<FormControl fullWidth margin="normal">
  <InputLabel id="select-EPE">Select EPE</InputLabel>
  <Select
    labelId="select-EPE"
    id="select-EPE"
    label="Select EPE"
    // 新增绑定选中值，让组件识别选中状态
    value={EPE_Record_Name}
    onChange={(event)=>{
      setEPE_Record_Name(event.target.value);
      EPE_Data.name = event.target.value
    }}
  >
    {response ? response.map((item)=>{
      // 新增key属性，避免React列表渲染警告
      return (<MenuItem value={item.Name} key={item.Name}>{item.Name}</MenuItem>);
    }) : null}
  </Select>
</FormControl>

可选优化 #

如果需要强制标签始终保持上浮不占位，可给InputLabel添加shrink属性：

<InputLabel id="select-EPE" shrink>Select EPE</InputLabel>

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