如何为Material-UI Select组件的选项添加图标

解决方案 #

首先确认你已经正确引入所有所需依赖：

// MUI v5 版本导入示例
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import { useState } from 'react';

你提供的代码默认只能让下拉展开的选项列表显示图标，如果需要选中后输入框内也同步显示图标，需要额外配置renderValue属性自定义选中值的渲染逻辑，完整可运行示例如下：

export default function LocationSelect() {
  const [selectedValue, setSelectedValue] = useState('');

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

  return (
    <div id='location-box'>
      <Select
        value={selectedValue}
        onChange={handleChange}
        // 自定义选中态展示内容
        renderValue={(selected) => {
          if (selected === '') {
            return (
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                <LocationOnIcon fontSize="small" />
                <span>Inbox</span>
              </div>
            )
          }
          return selected;
        }}
        sx={{ minWidth: 200 }}
      >
        <MenuItem value="">
          <ListItemIcon>
            <LocationOnIcon fontSize="small" />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </div>
  );
}

异常排查 #

• 如下拉选项内也不显示图标，先检查是否安装了图标包，可执行npm install @mui/icons-material安装后重试
• 如图标和文字排版错位，给对应容器添加display: flex; align-items: center样式即可调整对齐

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