如何直接调用MUI Select多选下拉菜单组件而非使用弹出层？

MUI 直接暴露了下拉菜单的核心组件——MenuList和MenuItem，你可以直接用这两个组件实现内嵌式多选功能，完全不需要依赖Select的弹出层逻辑。

具体实现思路：

• 用useState维护选中选项的数组状态
• 用MenuList作为选项容器，它会自动处理选项的布局和交互样式
• 每个选项通过MenuItem配合Checkbox实现勾选功能，点击时更新选中状态

以下是完整代码示例：

import { useState } from 'react';
import { MenuList, MenuItem, Checkbox, FormControlLabel, FormControl } from '@mui/material';

const InlineMultiSelect = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);
  const options = ['选项1', '选项2', '选项3', '选项4'];

  const handleOptionClick = (option) => {
    setSelectedOptions(prev => {
      if (prev.includes(option)) {
        return prev.filter(item => item !== option);
      } else {
        return [...prev, option];
      }
    });
  };

  return (
    <FormControl component="div">
      <MenuList>
        {options.map(option => (
          <MenuItem key={option} onClick={() => handleOptionClick(option)}>
            <FormControlLabel
              control={<Checkbox checked={selectedOptions.includes(option)} />}
              label={option}
            />
          </MenuItem>
        ))}
      </MenuList>
    </FormControl>
  );
};

export default InlineMultiSelect;

这样实现的多选选项会直接渲染在页面的div中，无弹出层，完全符合需求。你还可以自定义MenuList和MenuItem的样式（比如间距、背景色），和MUI其他组件的样式保持统一。

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