小编mur*_*ylü的帖子

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

如何更改打开/关闭下拉列表的图标?我希望功能保持不变。当我尝试将它们添加为 时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>
);
Run Code Online (Sandbox Code Playgroud)

icons autocomplete reactjs material-ui

6
推荐指数
1
解决办法
6940
查看次数

标签 统计

autocomplete ×1

icons ×1

material-ui ×1

reactjs ×1