Material UI Select组件标签不显示问题求助

问题原因 #

你当前的代码仅使用了Select组件的label属性，但Material UI的浮动标签（Floating Label）需要配合FormControl和InputLabel组件才能正常工作，单独设置label无法触发标签悬浮的效果。

修复后的代码 #

import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

// 组件内代码
<FormControl sx={{ width: '90%', marginBottom: '1rem' }} size="small">
  <InputLabel id="demo-simple-select-label">Role</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={role}
    label="Role"
  >
    <MenuItem value='MVD'>MVD</MenuItem>
    <MenuItem value='Police'>Police</MenuItem>
    <MenuItem value='Coperation'>Coperation</MenuItem>
  </Select>
</FormControl>

关键说明 #

• FormControl作为表单组件容器，负责统一管理标签、下拉框的状态与样式
• InputLabel需与Select的labelId严格对应，确保标签和下拉框的关联
• Select上的label属性不可省略，用于选中选项后维持标签的悬浮状态

修改后即可实现你期望的标签悬浮效果。

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