如何让MUI Autocomplete的每个选中值单独换行显示

要让多选模式下的MUI Autocomplete选中项每行显示一个，有两种简洁的实现方式：

方法一：直接修改内置样式 #

通过MUI的sx属性，针对选中标签的容器类设置块级显示，无需自定义渲染函数：

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

const countryOptions = ['South Africa', 'Portugal', 'Brazil', 'Spain'];

export default function MultiLineAutoComplete() {
  return (
    <Autocomplete
      multiple
      options={countryOptions}
      renderInput={(params) => (
        <TextField 
          {...params} 
          label="选择国家" 
          placeholder="点击选择国家" 
        />
      )}
      sx={{
        // 让每个选中标签独占一行
        '& .MuiAutocomplete-tag': {
          display: 'block',
          marginBottom: 8, // 标签间添加间距
        },
        // 调整输入框内边距和最小高度，适配多行标签
        '& .MuiOutlinedInput-input': {
          paddingTop: 12,
          minHeight: 60,
          whiteSpace: 'pre-wrap',
        },
      }}
    />
  );
}

方法二：自定义renderTags函数 #

如果需要更灵活的标签定制（比如修改标签样式、添加额外元素），可以重写renderTags方法：

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Chip from '@mui/material/Chip';

const countryOptions = ['South Africa', 'Portugal', 'Brazil', 'Spain'];

export default function CustomTagAutoComplete() {
  return (
    <Autocomplete
      multiple
      options={countryOptions}
      renderInput={(params) => (
        <TextField 
          {...params} 
          label="选择国家" 
          placeholder="点击选择国家" 
        />
      )}
      // 手动渲染每个标签为块级元素
      renderTags={(selectedValues, getTagProps) =>
        selectedValues.map((option, idx) => (
          <Chip
            key={idx}
            label={option}
            {...getTagProps({ index: idx })}
            sx={{
              display: 'block',
              marginBottom: 8,
              borderRadius: 1,
            }}
          />
        ))
      }
    />
  );
}

注意事项 #

• 若使用MUI v4，标签类名是MuiAutocomplete-chip，需替换代码中的MuiAutocomplete-tag；
• 若需要输入框高度随标签数量自动调整，可以结合状态监听选中值长度，动态设置输入框的minHeight；
• 调整marginBottom值可以控制标签间的垂直间距，提升可读性。

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