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

Question

我想将占位符 (-- Select --) 添加到由 TextField 使用 select 属性创建的以下 MUI Select 组件。

const [country, setCountry] = useState("")

<TextField
    select
    value={country}
    onChange={e => setCountry(e.target.value)}
>
    <MenuItem value='US'>America</MenuItem>
    <MenuItem value='CA'>Canada</MenuItem>
    <MenuItem value='UK'>England</MenuItem>
</TextField>

我尝试添加

placeholder='-- Select --'

道具，但无法显示占位符。

然后我尝试添加

label='-- Select --'

道具。尽管可以显示占位符，但当最初渲染组件并尝试选择一个选项时，标签移动到组件的左上角，我不想要该动画。然后我尝试添加

InputLabelProps={{disableAnimation: true}}

道具，但动画仍然存在。

有人可以教我如何在我的案例中添加占位符吗？

Answer 1

如果我们检查

Select

元素，

span

内部有一个空的

div

，其类为

.MuiSelect-select

，当没有选择值时可见。

我们可以使用此

span

创建一个解决方案，如下所示：

const [country, setCountry] = useState('');

return (
    <TextField
      sx={{
        width: '300px',
        '& .MuiSelect-select span::before': {
          content: "'-- Select --'",
        },
      }}
      select
      value={country}
      onChange={(e) => setCountry(e.target.value)}
    >
      <MenuItem value="US">America</MenuItem>
      <MenuItem value="CA">Canada</MenuItem>
      <MenuItem value="UK">England</MenuItem>
    </TextField>
);

您可以查看 this StackBlitz，了解此解决方案的实时工作示例。