variant="filled" does not work on <Select multiple>

Question

I don't know why the style is not applied. Can anyone solve this problem?

<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>

Full Code: https://codesandbox.io/s/select-multiple-tags-variant-filled-hc9y7

Who can help I thank!

Answer 1

Instead of adding the variant to the FormControl, use mui's <OutlinedInput /> component and not the <Input /> component for the input prop on Select

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