MUI v5 Select组件placeholder与label属性无法正常显示问题求助

1. Material UI v5（你使用的alpha.27版本）的Select组件本身不支持直接传递placeholder属性，直接设置会不生效
2. label属性不能直接单独传给Select组件，需要配合FormControl、InputLabel组件组合使用，否则会出现点击后label错位、显示异常的问题

按以下方式改造代码即可同时实现label正常展示、占位提示的效果：

1. 引入配套的表单控制组件
2. 将Select包裹在FormControl中，通过InputLabel定义标签文本
3. 新增value为空的MenuItem模拟placeholder效果

完整代码示例：

import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';

// 组件内渲染逻辑
<FormControl variant="outlined" size="small" fullWidth>
  <InputLabel id="select-label-id">Text</InputLabel>
  <Select
    labelId="select-label-id"
    id="select-id"
    label="Text"
    defaultValue=""
  >
    {/* 占位选项，加disabled属性可禁止用户选中 */}
    <MenuItem value="" disabled>Text</MenuItem>
    <MenuItem value={1}>Option 1</MenuItem>
    <MenuItem value={2}>Option 2</MenuItem>
  </Select>
</FormControl>

补充说明 #

• InputLabel的id要和Select的labelId保持一致，保证两者关联正常
• Select上的label属性值必须和InputLabel的文本完全一致，作用是给Outlined变体的边框计算缺口位置，避免label和边框重叠
• 如果是受控使用的Select，将defaultValue替换为绑定的value属性，同时在onChange回调中更新对应状态即可

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