reactjs - Material-UI - 如何在自动完成中自定义下拉图标？

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>
);

标签： reactjsautocompletematerial-uiicons

Answer 1

使用popupIconprop，它接受一个 ReactNode。Autocomplete 请参阅此处的完整 API ：

<Autocomplete popupIcon={<YourCustomIcon />}

现场演示