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

Question

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

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



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

Answer 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 api document

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

例子: