在Material UI React中设置样式/更改自动完成关闭图标 [英] Styling/ Changing Autocomplete close Icon in Material UI React

问题描述

我想更改材质UI的自动完成"中的图标.我找不到任何文档来对其进行自定义.

I wanted to change the icon in material UI's AutoComplete. I was not able to find any documentation to customize it.

基本上是两个图标，分别标记为1和2.我是Material Ui的新手，想知道是否可以这样做以及如何进行.

Basically the two icons, marked with 1 and 2. I am new to Material Ui and would like to know if this can be done and how.

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

Codepen for the same is https://codesandbox.io/s/material-demo-9vhkq

推荐答案

解释

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

Explain

If you check the DOM structure of it, you would find two button which have the class of something kind like

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

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

在其中可以找到特定的className

Inside of them you can find the specific className

MuiAutocomplete-clearIndicator
MuiAutocomplete-popupIndicator

MuiAutocomplete-clearIndicator
MuiAutocomplete-popupIndicator

您可以参考Material-UI自动完成CSS API 文档

Which you can refer to Material-UI Autocomplete css api document

clearIndicator
popupIndicator

clearIndicator
popupIndicator

通过为其设置样式，可以更改其样式和图标.

By setting styles to it, you can change it's styles, and the icons.

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

示例:

这篇关于在Material UI React中设置样式/更改自动完成关闭图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！