如何隐藏MUI Multiselect选择框中的已选选项？

你可以通过以下两种方式实现需求：

方法一：使用renderValue自定义显示内容（推荐） #

Multiselect组件提供了renderValue属性，允许你完全自定义选择框内的显示内容，直接返回空字符串或固定提示文本就能隐藏已选选项：

import Multiselect from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import { useState } from 'react';

function MyMultiselect() {
  const [selectedValues, setSelectedValues] = useState([]);

  const handleChange = (event) => {
    setSelectedValues(event.target.value);
  };

  return (
    <Multiselect
      multiple
      value={selectedValues}
      onChange={handleChange}
      renderValue={() => ''} // 返回空字符串，直接隐藏已选选项
      // 也可以返回固定提示文本，比如：renderValue={() => '请选择选项'}
    >
      <MenuItem value="option1">选项1</MenuItem>
      <MenuItem value="option2">选项2</MenuItem>
      <MenuItem value="option3">选项3</MenuItem>
    </Multiselect>
  );
}

方法二：通过CSS隐藏已选标签 #

如果不想修改组件逻辑，也可以通过CSS直接隐藏已选的Chip元素：

/* 全局样式，注意会影响所有Multiselect组件 */
.MuiSelect-multiple .MuiChip-root {
  display: none;
}

/* 局部样式，用自定义类名限定范围，避免影响其他组件 */
.custom-multiselect .MuiSelect-multiple .MuiChip-root {
  display: none;
}

使用局部样式时，给Multiselect添加对应类名即可：

<Multiselect
  multiple
  value={selectedValues}
  onChange={handleChange}
  className="custom-multiselect"
>
  {/* 选项内容 */}
</Multiselect>

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