如何为通过TextField创建的MUI Select组件添加占位符？

方法一：添加占位符选项（推荐） #

TextField的select模式下原生placeholder属性不生效，最直接的方式是新增一个值为空的MenuItem作为初始占位选项，配合状态初始值实现效果：

const [country, setCountry] = useState("")
<TextField
    select
    value={country}
    onChange={e => setCountry(e.target.value)}
>
    {/* 占位符选项，disabled可防止用户选中它 */}
    <MenuItem value="" disabled>-- Select --</MenuItem>
    <MenuItem value='US'>America</MenuItem>
    <MenuItem value='CA'>Canada</MenuItem>
    <MenuItem value='UK'>England</MenuItem>
</TextField>

• 初始状态下组件显示-- Select --，选择其他选项后切换为对应内容
• 加上disabled可避免用户重新选中占位选项（若需要允许重置为空，可移除该属性）

方法二：强制固定标签位置（替代方案） #

如果想通过label属性模拟占位符，可配置InputLabelProps强制标签不浮动，解决动画问题：

const [country, setCountry] = useState("")
<TextField
    select
    value={country}
    onChange={e => setCountry(e.target.value)}
    label="-- Select --"
    InputLabelProps={{
        shrink: false, // 强制标签不收缩到左上角
        style: { pointerEvents: 'none' } // 避免标签干扰组件点击
    }}
>
    <MenuItem value='US'>America</MenuItem>
    <MenuItem value='CA'>Canada</MenuItem>
    <MenuItem value='UK'>England</MenuItem>
</TextField>

• shrink: false会让标签始终保持在输入框内，不会触发浮动动画
• 此方法本质是用标签模拟占位符，交互逻辑不如方法一贴合Select组件的常规用法

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