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

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

React-Select : How to rotate dropdown indicator when menu open

javascript

reactjs

react-select