我想更改 Material UI 的 AutoComplete 中的图标。我找不到任何文档来自定义它。
基本上是两个图标，标有 1 和 2。我是 Material Ui 的新手，想知道这是否可以完成以及如何完成。
相同的 Codepen 是https://codesandbox.io/s/material-demo-9vhkq
Material UI React 中的样式/更改自动完成关闭图标
IT技术
javascript
reactjs
autocomplete
2021-05-05 12:57:24
2个回答
解释
如果您检查它的 DOM 结构，您会发现两个按钮，它们的类类似于
className="MuiButtonBase-root MuiIconButton-root MuiAutocomplete-clearIndicator MuiAutocomplete-clearIndicatorDirty"
className="MuiButtonBase-root MuiIconButton-root MuiAutocomplete-popupIndicator"
在它们里面你可以找到特定的 className
MuiAutocomplete-clearIndicator
MuiAutocomplete-popupIndicator
可以参考 Material-UI Autocomplete css api文档
清除
指示器弹出指示器
通过为其设置样式，您可以更改它的样式和图标。
代码
const useStyles = makeStyles(theme => ({
root: {
backgroundColor: "yellow"
},
clearIndicator: {
backgroundColor: "gray",
"& span": {
"& svg": {
"& path": {
d: "path('M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z')" // your svg icon path here
}
}
}
},
popupIndicator: {
backgroundColor: "blue"
}
}));
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
classes={{
clearIndicatorDirty: classes.clearIndicator,
popupIndicator: classes.popupIndicator
}}
例子：
您可以使用popupIcon属性通过 API 更改弹出图标：
popupIcon={<ImportContacts />}
显示为：
在这里找到完整的 API：https : //material-ui.com/api/autocomplete/