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

Question

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

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

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

Answer 1

解释

如果你检查它的 DOM 结构，你会发现两个按钮有类似

的 class

className="MuiButtonBase-root MuiIconButton-root MuiAutocomplete-clearIndicator MuiAutocomplete-clearIndicatorDirty"
className="MuiButtonBase-root MuiIconButton-root MuiAutocomplete-popupIndicator"

在其中您可以找到特定的 class名称

MuiAutocomplete-clearIndicator
MuiAutocomplete-popupIndicator

可以参考Material-UI自动补全cssapidocument

clearIndicator
popupIndicator

通过为它设置样式，您可以更改它的样式和图标。

代码

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
      }}

示例：

Answer 2

您可以使用 popupIcon 属性:

更改带有 API 的弹出图标

popupIcon={<ImportContacts />}

显示为：

完整 API 在此处找到： https://material-ui.com/api/autocomplete/

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

Styling/ Changing Autocomplete close Icon in Material UI React

javascript

autocomplete

reactjs

解释

代码