我的 MUI Select 组件不显示占位符或标签道具

Question

基本上就是标题所说的。 我正在尝试在我的应用程序中使用 Select 组件，但placeholder="Text"和label={"Text"}道具都没有显示预期的结果。

使用placeholder ，Select 呈现为“空”，而label道具看起来像是在做某事，但单击它后，结果如下：

我的 package.json 显示

"@material-ui/core": "^5.0.0-alpha.27",
"@material-ui/icons": "^5.0.0-alpha.27",
"@material-ui/lab": "^5.0.0-alpha.27",
"@material-ui/system": "^5.0.0-alpha.27",

<Select
  label={"Text"}
  variant="outlined"
  size="small"
  fullWidth
>
  <MenuItem value={1}>Option 1</MenuItem>
  <MenuItem value={2}>Option 2</MenuItem>
</Select>

Answer 1

Material UI 不直接支持<Select />占位符，因为它也是标签：参见： here

相反，您将使用<InputLabel>Text</InputLabel>

---

像这样的东西：

<FormControl>
    <InputLabel>Text</InputLabel>
    <Select variant="outlined" size="small" fullWidth>
    <MenuItem value={1}>Option 1</MenuItem>
    <MenuItem value={2}>Option 2</MenuItem>
    </Select>
</FormControl>