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

Question

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

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

该怎么做

Answer 1

react-select提供了styling api，它提供了这种自定义功能。给styles道具的对象中的每个属性都是一个函数，该函数将当前组件状态作为道具。该州还具有来自基本组件（Select）的道具。

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

CodeSandbox example