Material UI Autocomplete 展开或折叠时旋转图标答案

【问题标题】：Material UI Auto Complete Rotate icon on expand or collapseMaterial UI Autocomplete 展开或折叠时旋转图标
【发布时间】：2018-11-29 11:10:00
【问题描述】：

当自动完成组件展开时，我想旋转 Material UI 的自动完成图标。

这是自动完成的演示： https://codesandbox.io/s/0xx573qrln

非常感谢任何帮助。

【问题讨论】：

在react-select的文档中搜索dropdownIndicator [react-select.com/props#prop-types]

标签： reactjs material-ui

【解决方案1】：

您可以使用 react-select 的 components.DropdownIndicator 属性。组件的当前状态可以通过组件的selectProps prop 获取。

我遇到了同样的挑战，我就是这样做的：

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

【讨论】：