如何修改Material UI Autocomplete组件的关闭图标并保留原有点击功能？

针对需要替换多选模式下选中标签默认关闭图标的需求，MUI 官方预留了不需要重写交互逻辑的定制入口，替换后可以完全保留原有点击图标删除选中项的功能，不需要手动绑定事件。 #

方案1：使用原生closeIcon属性（最轻量改动） #

这个属性是Autocomplete专门为替换多选标签关闭图标设计的，只需要传入自定义图标组件，框架会自动把原有的关闭事件、hover样式绑定到新图标上，改动成本最低。
只需要在现有代码的Autocomplete组件上新增一行配置即可，原有逻辑完全不用调整：

import CustomCloseIcon from './你的自定义关闭图标组件'
<Autocomplete
  multiple
  id="checkboxes-tags-demo"
  // 新增这行完成图标替换
  closeIcon={<CustomCloseIcon fontSize="small" />}
  // 以下为原有配置，无需任何修改
  options={top100Films}
  disableCloseOnSelect
  getOptionLabel={(option) => option.title}
  renderOption={(option, { selected }) => (
    <React.Fragment>
      <Checkbox
        icon={icon}
        checkedIcon={checkedIcon}
        style={{ marginRight: 8 }}
        checked={selected}
      />
      {option.title}
    </React.Fragment>
  )}
  style={{ width: 500 }}
  renderInput={(params) => (
    <TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
  )}
/>

适配范围：MUI v4.12+、所有v5正式版本，替换后图标点击删除、hover态高亮的交互和默认图标完全一致。

方案2：通过renderTags自定义标签渲染（灵活度更高） #

如果除了替换关闭图标，还需要调整标签的圆角、内边距、文字样式，可以通过renderTags回调拿到选中项和对应的事件处理函数，自定义标签结构。
核心要注意的是必须把getTagProps返回的所有属性和事件完整透传，才能保留原有的关闭交互逻辑，不需要手动实现删除选中项的方法：

import { Chip } from '@mui/material'
import CustomCloseIcon from './你的自定义关闭图标组件'
<Autocomplete
  // ...其他原有配置
  renderTags={(value, getTagProps) =>
    value.map((option, index) => {
      const { key, ...tagProps } = getTagProps({ index })
      return (
        <Chip
          key={key}
          label={option.title}
          // 透传原有所有事件、样式属性
          {...tagProps}
          // 自定义关闭图标
          deleteIcon={<CustomCloseIcon />}
        />
      )
    })
  }
/>

常见踩坑提示 #

• 不要直接用全局CSS覆盖默认的.MuiChip-deleteIcon类来替换图标，这种方式在MUI版本升级、主题自定义时容易出现样式失效，还可能因为事件绑定层级问题导致点击无响应
• 自定义图标组件建议开启样式继承（比如把color、fontSize设置为inherit），让图标能自动适配Chip的默认样式规范，不需要手动匹配颜色、大小

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