如何在Material UI Autocomplete中渲染自定义JSX元素

renderTags 属性仅作用于多选模式下已选标签的渲染，如果你是单选场景、或是需要在Autocomplete组件外部渲染选中对应的自定义JSX，该属性确实无法满足需求，可按以下两种方案实现：

方案1：受控绑定value实现自定义渲染 #

该方案灵活度最高，单选、多选场景均适用，核心是将Autocomplete的value绑定到本地状态，监听选中变化后直接根据状态值渲染需要的JSX：

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

// 选项数据可按需扩展自定义字段
const options = [
  { label: '选项1', value: 'opt1', renderContent: <p style={{color: '#f00'}}>选项1对应的自定义内容</p> },
  { label: '选项2', value: 'opt2', renderContent: <div><span>选项2图标</span> 选项2对应的自定义内容</div> },
];

function CustomAutoComplete() {
  const [selectedVal, setSelectedVal] = useState(null);

  return (
    <div>
      <Autocomplete
        disablePortal
        options={options}
        value={selectedVal}
        onChange={(_, newValue) => setSelectedVal(newValue)}
        renderInput={(params) => <TextField {...params} label="请选择选项" />}
      />
      {/* 选中后渲染对应JSX */}
      {selectedVal && <div className="selected-content">{selectedVal.renderContent}</div>}
    </div>
  );
}

• 多选场景适配：给Autocomplete添加multiple={true}属性，状态初始值设置为[]，渲染时遍历selectedVal数组输出对应内容即可。

方案2：自定义输入框内部的选中展示 #

如果你的需求是修改输入框内部的选中项显示样式，不需要外部渲染，可以根据场景选择对应属性：

• 单选场景：直接在getOptionLabel属性中返回自定义JSX结构即可，无需使用renderTags
• 多选场景：如果renderTags的自定义程度不足，可以在renderInput的InputProps中覆盖startAdornment属性，完全自定义已选标签的渲染逻辑：

<Autocomplete
  multiple
  options={options}
  value={selectedVals}
  onChange={(_, newValue) => setSelectedVals(newValue)}
  renderInput={(params) => (
    <TextField {...params} label="多选选项">
      <div sx={{ display: 'flex', gap: '4px', flexWrap: 'wrap', marginRight: '8px' }}>
        {/* 自定义已选标签渲染 */}
        {selectedVals.map(opt => <span key={opt.value} className="custom-tag">{opt.label}</span>)}
      </div>
      {params.InputProps}
    </TextField>
  )}
/>

注意：如果使用JSX作为选项展示内容，需正确配置isOptionEqualToValue属性，避免选中匹配异常。

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