React-Select：菜单打开时如何旋转下拉指示器

【问题标题】：React-Select : How to rotate dropdown indicator when menu openReact-Select：菜单打开时如何旋转下拉指示器
【发布时间】：2019-04-01 09:51:00
【问题描述】：

例如：https://codesandbox.io/s/jz33xx66q9?module=/example.js

我想在菜单打开时旋转表情符号以缩小尺寸

怎么做

【问题讨论】：

你的意思是上下颠倒吗？
Rotate arrow indicator in React-select v2的可能重复

标签： javascript reactjs react-select

【解决方案1】：

react-select 提供了一个styling api，它提供了这样的定制。赋予styles prop 的对象中的每个属性都是一个函数，它将当前组件状态作为一个 prop 获取。该状态还具有来自基本组件 (Select) 的道具。

<Select
    { ... }
    styles={{
        dropdownIndicator: (provided, state) => ({
            ...provided,
            transform: state.selectProps.menuIsOpen && 'rotate(180deg)'
        })
    }}
/>

CodeSandbox example

【讨论】：