Material UI Select组件标签显示异常：展示选项值而非预设标签

云原生阿岚

2026-9-29

Material UI Select组件标签不显示问题修复方案

问题原因

代码中存在3处不符合Material UI Select组件规范的写法，导致标签无法正常渲染：

缺少独立的InputLabel组件：Select自带的label属性仅用于和外部InputLabel关联匹配，不会单独渲染文本内容
错误将select属性加在了父级FormControl组件上，该属性属于Select组件的自有属性
Select组件缺少与标签对应的关联ID，无法和InputLabel完成联动

修复后的代码示例

// 先确保从MUI中引入InputLabel组件
import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';

const [inputFields, setInputFields] = useState([
  { id: uuidv4(), relationship: '', initiatorMessage: '', email: '' }]);

inputFields?.map(inputField => {
  return (
  ...
  <FormControl
    className={classes.formControl}
  >
    {/* 新增InputLabel组件，设置唯一ID区分多表单项 */}
    <InputLabel id={`relationship-label-${inputField.id}`}>relationship</InputLabel>
    <Select
      name="relationship"
      labelId={`relationship-label-${inputField.id}`} // 绑定对应label的ID
      id={`relationship-select-${inputField.id}`}
      label="relationship"
      value={inputField.relationship}
      onChange={e => handleChangeInput(inputField.id, e)}
      inputProps={{
        classes: {
          root: classes.root,
        },
      }}
    >
      {relationships.map(option => (
        <MenuItem key={option.value} value={option.value}>
          {option.value}
        </MenuItem>
      ))}
    </Select>
  </FormControl>
})
}