React Material-UI：避免带图标和文本的Select组件换行的正确方法

在使用React Material-UI实现带图标的Select组件时，若直接在MenuItem内使用ListItemIcon和ListItemText，选中选项后会出现图标与文本换行的问题。以下是官方推荐的两种正确处理方式：

方式1：自定义renderValue控制选中内容布局 #

通过Select的renderValue属性，自定义选中状态下的内容展示逻辑，确保图标与文本在同一行：

import { useState } from 'react';
import { InputLabel, Select, MenuItem } from '@mui/material';
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';

function SelectIconTest() {
  const [selectOption, setSelectOption] = useState('0');
  const optionList = [
    { value: '0', label: 'None', icon: null },
    { value: '1', label: 'Bank', icon: <AccountBalanceIcon /> }
  ];

  const handleChange = (e) => {
    setSelectOption(e.target.value);
  };

  const renderSelected = (value) => {
    const selected = optionList.find(opt => opt.value === value);
    if (!selected) return 'None';
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {selected.icon}
        <span>{selected.label}</span>
      </div>
    );
  };

  return (
    <>
      <InputLabel id="label-select-icon">带图标的选择器</InputLabel>
      <Select
        labelId="label-select-icon"
        id="select-select-icon"
        name="selectIcon"
        value={selectOption}
        onChange={handleChange}
        renderValue={renderSelected}
      >
        <MenuItem value="0">
          <em>None</em>
        </MenuItem>
        <MenuItem value="1">
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <AccountBalanceIcon />
            <span>Bank</span>
          </div>
        </MenuItem>
      </Select>
    </>
  );
}

方式2：使用基础布局组件包裹MenuItem内容 #

避免直接使用为ListItem设计的ListItemIcon和ListItemText，改用Box（或原生容器）配合图标组件，通过Flex布局确保内容同行：

import { useState } from 'react';
import { InputLabel, Select, MenuItem, Box } from '@mui/material';
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';

function SelectIconTest() {
  const [selectOption, setSelectOption] = useState('0');

  const handleChange = (e) => {
    setSelectOption(e.target.value);
  };

  return (
    <>
      <InputLabel id="label-select-icon">带图标的选择器</InputLabel>
      <Select
        labelId="label-select-icon"
        id="select-select-icon"
        name="selectIcon"
        value={selectOption}
        onChange={handleChange}
      >
        <MenuItem value="0">
          <em>None</em>
        </MenuItem>
        <MenuItem value="1">
          <Box display="flex" alignItems="center" gap={1}>
            <AccountBalanceIcon />
            <span>Bank</span>
          </Box>
        </MenuItem>
      </Select>
    </>
  );
}

问题根源说明 #

ListItemIcon和ListItemText是Material-UI为List组件中的ListItem设计的组件，默认带有适配列表项的块级布局样式。直接将它们用于Select的MenuItem时，Select的选中区域不会自动处理这种嵌套的块级元素，从而导致图标与文本换行。官方不推荐在Select选项中直接使用这两个组件，建议采用上述两种方式实现带图标的选择器。

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