Пользовательский интерфейс материала Автозаполнение Значок поворота при развертывании или сворачивании - PullRequest
Новая
       7

Пользовательский интерфейс материала Автозаполнение Значок поворота при развертывании или сворачивании

0 голосов
/ 29 ноября 2018

Я хочу повернуть значок автозаполнения пользовательского интерфейса материала, когда компонент автозаполнения развернут.enter image description here

Это демонстрация автоматического завершения: https://codesandbox.io/s/0xx573qrln

Любая помощь очень ценится.

1 Ответ

0 голосов
/ 02 июля 2019

Вы можете использовать опору components.DropdownIndicator в реагирующем выборе.Текущее состояние компонента может быть доступно через selectProps опору компонента.

Я столкнулся с той же проблемой, и вот как я это сделал: 

// Select.js

const styles = theme => ({
  dropdown: {
    transition: theme.transitions.create(["transform"], {
      duration: theme.transitions.duration.short
    })
  },
  dropdownOpen: {
    transform: "rotate(-180deg)"
  },
  dropdownClosed: {
    transform: "rotate(0)"
  }
})

function DropdownIndicator(props) {
  return (
    <KeyboardArrowDown
      className={[
        props.selectProps.classes.dropdown,
        props.selectProps.menuIsOpen
          ? props.selectProps.classes.dropdownOpen
          : props.selectProps.classes.dropdownClosed
      ]}
    />
  );
}

const components = { DropdownIndicator };

export function Select(props) {
  return <Select componenets={components} {...props} />
}

Надеюсь, что вы былиВы можете решить задачу самостоятельно.

Демо (разветвленная ссылка сверху): https://codesandbox.io/s/material-demo-b9frk

...