变体 =“填充”不适用于 <选择多个>答案

【问题标题】：variant="filled" does not work on <Select multiple>变体 =“填充”不适用于 <选择多个>
【发布时间】：2021-09-20 19:54:58
【问题描述】：

我不知道为什么没有应用样式。谁能解决这个问题？

<FormControl className={classes.formControl} variant="filled">
  <InputLabel id="input-label">Multiple Select</InputLabel>
  <Select
    variant="filled"
    fullWidth={true}
    labelId="input-label"
    multiple
    value={value}
    onChange={event => setValue(event.target.value)}
    input={<Input />}
    renderValue={() => value.join(", ")}
  >
    <MenuItem value="AAAAA">
      <Checkbox checked={value.indexOf("AAAAA") !== -1} />
      <ListItemText primary="AAAAA" />
    </MenuItem>
    <MenuItem value="BBBBB">
      <Checkbox checked={value.indexOf("BBBBB") !== -1} />
      <ListItemText primary="BBBBB" />
    </MenuItem>
    <MenuItem value="CCCCC">
      <Checkbox checked={value.indexOf("CCCCC") !== -1} />
      <ListItemText primary="CCCCC" />
    </MenuItem>
  </Select>
</FormControl>

完整代码： https://codesandbox.io/s/select-multiple-tags-variant-filled-hc9y7

谁能帮我谢谢！

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

不要将变体添加到 FormControl，而是使用 mui 的 <OutlinedInput /> 组件而不是 <Input /> 组件作为 Select 上的输入道具

<Select
  variant="filled"
  fullWidth={true}
  labelId="input-label"
  multiple
  value={value}
  onChange={event => setValue(event.target.value)}
  input={<OutlinedInput />}
  renderValue={() => value.join(", ")}
>

【讨论】：

【解决方案2】：

我遇到了同样的问题，我使用了 AutoComplete 组件（尽管它只在 Material UI 的实验室部分）：https://material-ui.com/components/autocomplete/

希望对你有用。

【讨论】：