如何为Material UI Multiselect弹出层添加不可选的自定义搜索头部

方案1：通过MenuProps自定义Paper内容（推荐） #

你可以直接利用MUI Select组件内置的MenuProps属性，自定义弹出层Paper容器的子元素结构，把搜索栏和选项列表平级放在Paper内部，这样搜索栏就不属于MenuItem所在的UL列表，自然不会被识别为可选项：

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

// 组件内部逻辑
const [searchValue, setSearchValue] = useState('');
const allOptions = ['1', '2', '3', '4']; // 你的原始选项列表
const filteredOptions = allOptions.filter(opt => opt.includes(searchValue));

<Select
  multiple
  // 其余你需要的Select参数
  MenuProps={{
    PaperProps: {
      children: (
        <>
          {/* 搜索栏直接放在Paper容器内，不属于下方选项列表 */}
          <Input
            placeholder="搜索选项"
            value={searchValue}
            onChange={(e) => setSearchValue(e.target.value)}
            sx={{ padding: '8px 16px', width: '100%', boxSizing: 'border-box' }}
          />
          {/* 筛选后的选项列表 */}
          <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
            {filteredOptions.map(option => (
              <MenuItem key={option} value={option}>
                {option}
              </MenuItem>
            ))}
          </ul>
        </>
      )
    }
  }}
>
</Select>

方案2：禁用搜索栏所在MenuItem（兼容场景） #

如果你不想改动Popover的整体结构，也可以给包裹搜索框的MenuItem添加禁用属性、自定义样式和事件拦截，避免它被当成可选项触发选中逻辑：

<Select multiple {...props}>
  <MenuItem 
    disabled
    sx={{
      opacity: 1, // 清除MUI禁用态默认的半透明效果
      '&:hover': { backgroundColor: 'transparent' } // 清除hover高亮效果
    }}
    onClick={(e) => e.stopPropagation()} // 阻止点击事件冒泡到Select，避免触发选中
  >
    <input value={value} id="search" onChange={/* 你的搜索逻辑 */} />
  </MenuItem>
  <MenuItem value="1">1</MenuItem>
  <MenuItem value="2">2</MenuItem>
</Select>

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