Material-UI Autocomplete组件如何自定义下拉箭头图标且保留原有功能？

使用Autocomplete组件原生提供的popupIcon属性即可完成自定义替换，不会破坏原有交互。你之前直接修改endAdornment会覆盖MUI内置的带事件绑定的图标元素，才会导致原有功能失效。

修改后的代码如下：

// 提前引入自定义箭头图标，也可以直接使用img标签引入svg资源
import CustomArrow from './your-custom-arrow-path';

return (
    <div>
        <Autocomplete
            {...defaultProps}
            className="contract-search"
            onChange={(event, value) => {
                handleOnChange(event, value);
            }}
            id="disable-close-on-select"
            sx={{ width: 300 }}
            // 新增popupIcon属性替换默认下拉箭头
            popupIcon={<CustomArrow />}
            // 若使用img格式图标可以直接写：
            // popupIcon={<img src={`${ASSETS_BASE_URL}/icons/custom-arrow.svg`} alt="下拉箭头" />}
            renderInput={params => {
                console.log(params);
                return (
                    <TextField
                        {...params}
                        InputProps={{
                            ...params.InputProps,
                            startAdornment: (
                                <span className="contract-search-icon">
                                    <img src={`${ASSETS_BASE_URL}/icons/icon-search.svg`} alt="" />
                                </span>
                            ),
                        }}
                        label="Vertrag suchen"
                        variant="standard"
                    />
                );
            }}
        />
    </div>
);

额外注意事项：

• 不要手动覆盖params.InputProps.endAdornment，该属性内置了带事件绑定的清除图标、下拉箭头元素，直接覆盖会丢失交互
• 如果需要同时替换清除图标，可使用Autocomplete自带的clearIcon属性完成，同样不会影响原有功能
• 所有MUI自带的图标交互逻辑会自动绑定到你传入的自定义图标上，无需额外绑定点击事件

内容的提问来源于stack exchange，提问作者murat dereköylü