Стилизация / изменение значка закрытия автозаполнения в пользовательском интерфейсе материала

Я хотел изменить значок в автозаполнении пользовательского интерфейса. Я не смог найти какую-либо документацию для его настройки.

В основном две иконки, отмеченные 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"

Внутри них вы можете найти конкретное имя класса

MuiAutocomplete-clearIndicator
MuiAutocomplete-popupIndicator

Который вы можете сослаться на Material-UI Autocomplete документ CSS API

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

Пример:

Редактировать снисходительно-Оскар-2t15j


Есть идеи?

10000