有没有办法更改材质ui的自动完成组件上的关闭图标？答案

【问题标题】：Is there a way to change the close icons on the autocomplete component of material ui?有没有办法更改材质ui的自动完成组件上的关闭图标？
【发布时间】：2021-06-25 12:51:45
【问题描述】：

我想更改图标，但希望在单击时保留该功能。有什么好的解决办法吗？

I want to change this Icon

<Autocomplete
      multiple
      id="checkboxes-tags-demo"
      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" />
      )}
    />

谁能帮帮我？

【问题讨论】：

标签： javascript reactjs autocomplete material-ui

【解决方案1】：

您可以传递一个函数来自定义 Autocomplete 使用的 Chip 组件的渲染

<Autocomplete
    multiple
    id="tags-filled"
    options={top100Films.map((option) => option.title)}
    defaultValue={[top100Films[13].title]}
    freeSolo
    renderTags={(value, getTagProps) =>
      value.map((option, index) => (
        <Chip variant="outlined" label={option} {...getTagProps({ index })} />
      ))
    }
    renderInput={(params) => (
      <TextField {...params} variant="filled" label="freeSolo" placeholder="Favorites" />
    )}
  />

并且Chip组件可以通过deleteIcon prop进一步定制

编辑：有关详细信息，请参阅 the API of the Autocomplete 和 the API of the Chip

【讨论】：

【解决方案2】：

您可以使用自动完成的ChipProps 更改它，因为该图标是Chip 组件的一部分，并且可以通过deleteIcon 属性进行自定义

【讨论】：