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

Answer 1

使用

popupIcon

属性，它接受一个 ReactNode。请参阅

Autocomplete

此处的完整 API：

<Autocomplete popupIcon={<YourCustomIcon />}

现场演示

Answer 2

“& .MuiAutocomplete-endAdornment”：{ 显示：“内容”， 宽度：“3rem”， },