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

Question

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

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

怎么做

Answer 1

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

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

代码沙盒示例