React-Select: как повернуть выпадающий индикатор при открытии меню

Question

в примере: https://codesandbox.io/s/jz33xx66q9?module=/example.js

я хочу повернуть эмодзи в увеличенном размере при открытии меню

как это сделать

Answer 1

react-select предоставляет стиль API , который предлагает такую ​​настройку. Каждый атрибут в объекте, заданном для styles prop, является функцией, которая получает текущее состояние компонента как prop. В штате также есть реквизиты из базового компонента (Select).

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

Пример CodeSandbox