Material UI中如何让下拉选中项横向排列？

我有一个下拉组件供用户选择所需语言，选中项应显示为图标与文字横向排列，但目前选中项是纵向展示的。我尝试在Select组件和MenuItem组件上设置flexDirection: 'row'，但未生效。代码如下：

<Box sx={{width: '100%'}}> 
    <Select sx={{width: '160px'}} defaultValue={1}>
        <MenuItem sx={{gap: 1}} value={1}>
            <Avatar src={UK} sx={{width: 24, height: 24 }}/>
            English
        </MenuItem>
        <MenuItem sx={{gap: 1}} value={2}>
            <Avatar src={Malaysia} sx={{width: 24, height: 24 }}/>
            Malay
        </MenuItem>
        <MenuItem sx={{gap: 1}} value={3}>
            <Avatar src={China} sx={{width: 24, height: 24 }}/>
            Mandarin
        </MenuItem>
    </Select>
</Box>

问题根源 #

MUI的Select组件默认只会提取MenuItem中的文本内容渲染选中项，不会包含图标元素，所以直接给Select或MenuItem设置flexDirection无法影响选中项的布局。

解决方案 #

通过Select的renderValue属性自定义选中项的渲染逻辑，手动实现图标与文字的横向排列：

import { Box, Select, MenuItem, Avatar } from '@mui/material';

// 抽离语言选项数据，提升可维护性
const languageList = [
  { value: 1, label: 'English', icon: UK },
  { value: 2, label: 'Malay', icon: Malaysia },
  { value: 3, label: 'Mandarin', icon: China },
];

function LanguageSelect() {
  return (
    <Box sx={{ width: '100%' }}>
      <Select
        sx={{ width: '160px' }}
        defaultValue={1}
        // 自定义选中项的渲染内容
        renderValue={(selectedVal) => {
          const targetLang = languageList.find(item => item.value === selectedVal);
          return (
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <Avatar src={targetLang.icon} sx={{ width: 24, height: 24 }} />
              {targetLang.label}
            </Box>
          );
        }}
      >
        {languageList.map(item => (
          <MenuItem 
            key={item.value} 
            value={item.value}
            sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
          >
            <Avatar src={item.icon} sx={{ width: 24, height: 24 }} />
            {item.label}
          </MenuItem>
        ))}
      </Select>
    </Box>
  );
}

核心要点 #

• renderValue：完全接管选中项的渲染，返回包含图标和文字的横向布局容器（用Box设置display: flex和alignItems: center实现对齐）。
• 统一菜单选项布局：给MenuItem添加display: flex和alignItems: center，确保下拉选项内部的图标与文字也保持横向对齐。
• 数据抽离：将语言选项整理为数组，避免重复代码，后续新增语言只需修改数组即可。

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