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示例