Material UI AutoComplete组件：非编辑时强制单行显示求助

核心思路 #

借助AutoComplete自身的open状态区分编辑/非编辑模式，动态切换容器样式：

• 非编辑状态（未点击展开下拉）：强制芯片容器单行排列，超出部分隐藏或截断
• 编辑状态（点击展开下拉）：允许芯片换行，完整显示所有内容

具体实现代码 #

import { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Chip from '@mui/material/Chip';

export default function MultiSelectSearchBar() {
  const [selectedValues, setSelectedValues] = useState([]);
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);

  // 模拟选项数据
  const options = [
    { label: '超长标签示例1234567890abcdefghijklmn' },
    { label: '标签2' },
    { label: '标签3' },
    { label: '另一个超长标签示例0987654321zyxwvutsrqpon' },
  ];

  return (
    <Autocomplete
      multiple
      open={isDropdownOpen}
      onOpen={() => setIsDropdownOpen(true)}
      onClose={() => setIsDropdownOpen(false)}
      value={selectedValues}
      onChange={(e, newVals) => setSelectedValues(newVals)}
      options={options}
      renderTags={(values, getTagProps) =>
        values.map((opt, idx) => (
          <Chip key={idx} label={opt.label} {...getTagProps({ index: idx })} />
        ))
      }
      renderInput={(params) => (
        <TextField
          {...params}
          label="搜索"
          variant="outlined"
          sx={{
            // 控制芯片容器的核心样式
            '& .MuiAutocomplete-inputRoot': {
              // 非编辑状态：单行不换行，超出隐藏
              ...(!isDropdownOpen && {
                display: 'flex',
                flexWrap: 'nowrap',
                overflow: 'hidden',
              }),
              // 编辑状态：允许换行展开
              ...(isDropdownOpen && {
                flexWrap: 'wrap',
                overflow: 'visible',
              }),
            },
            // 调整芯片间距避免拥挤
            '& .MuiChip-root': {
              marginRight: 0.5,
            },
            // 可选：非编辑状态下截断超长芯片并显示省略号
            '& .MuiAutocomplete-inputRoot:not(.Mui-focused) .MuiChip-root:last-child': {
              maxWidth: 'calc(100% - 70px)', // 预留输入光标位置宽度
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            },
          }}
        />
      )}
    />
  );
}

关键样式说明 #

• flexWrap: 'nowrap'：强制芯片容器单行排列，彻底避免换行
• overflow: 'hidden'：隐藏超出容器宽度的内容（也可替换为overflowX: 'auto'启用横向滚动条）
• 通过isDropdownOpen（即AutoComplete的open状态）动态切换样式，实现两种显示逻辑的无缝切换

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