样式/更改 Material UI React 中的自动完成关闭图标

Posted 2023-03-05

【中文标题】样式/更改 Material UI React 中的自动完成关闭图标

【英文标题】：Styling/ Changing Autocomplete close Icon in Material UI React

【发布时间】：2020-05-27 11:55:26

【问题描述】：

我想更改材质 UI 的自动完成中的图标。我找不到任何文档来定制它。

基本上是两个图标，分别标有 1 和 2。我是 Material Ui 的新手，想知道这是否可以做到以及如何做到。

相同的 Codepen 是 https://codesandbox.io/s/material-demo-9vhkq

【参考方案1】：

解释

如果你检查它的 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 apidocument

清除指示器 弹出指示符

通过给它设置样式，你可以改变它的样式和图标。

代码

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
      

例子：

【讨论】：

所以雪佛龙是弹出指示器。图标可以改吗？

【参考方案2】：

您可以使用 API 使用 popupIcon 属性更改弹出图标：

popupIcon=<ImportContacts />

显示为：

在这里找到完整的 API： https://material-ui.com/api/autocomplete/