如何在Material-UI的Autocomplete组件中自定义下拉菜单图标？

Question

我该如何仅更改打开/关闭下拉列表的图标？ 我希望功能保持不变。 当我尝试将它们添加为endAdornment时，删除和打开/关闭（箭头）图标的功能都消失了。 我只想添加一个新的箭头图标，而不是 Material-UI 的自定义图标。

return (
    <div>
        <Autocomplete
            {...defaultProps}
            className="contract-search"
            onChange={(event, value) => {
                handleOnChange(event, value);
            }}
            id="disable-close-on-select"
            sx={{ width: 300 }}
            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>
);

- murat dereköylü

Answer 1

使用popupIcon属性，它接受一个ReactNode。查看Autocomplete的完整API，在此处：

<Autocomplete popupIcon={<YourCustomIcon />}

演示

- NearHuscarl

---

你知道我怎么给那张图片添加旋转效果吗？这样会对我非常有帮助。 - Muneeb