Как изменить IconComponent NativeSelect в зависимости от того, открыт он или нет

Question

Я настраиваю NativeSelect (в Material UI v3). Я хочу изменить IconElement в зависимости от того, открыт или расширен NativeSelect или нет. С NativeSelect кажется, что я не могу использовать реквизиты open, onOpen или onClose.

<NativeSelect
            input={<InputBase
                className={dropdownSelectStyle.rootInputBaseStyle}/>}
            IconComponent={ExpandMore}
            {...props}>
            {
                dropdownElements.map((currEntry: string): HTMLOptionElement => (
                    <option key={currEntry} value={currEntry}>
                        {currEntry}
                    </option>
                ))
            }

        </NativeSelect>

Я бы хотел, чтобы IconComponent здесь был значком ExpandLess, когда NativeSelect открыт и изменяется на ExpandMore, когда NativeSelect закрыт.

Answer 1

По-прежнему возникают проблемы, несмотря на использование предложения выше. Мой код

Стиль:

const useStyles: JSON = makeStyles({
    root: {
        backgroundColor: "#ffffff",
        borderWidth: 1,
        borderRadius: 0,
        borderColor: "#bfbfbf",
        borderStyle: 'solid',
        boxShadow: "0 1px 6px 0 rgba(0, 0, 0, 0.16)",
        minWidth: 279,
        "&$iconOpen": {
            transform: "rotate(180deg)"
        },
    },
    focused: {},
    iconOpen: {}
});

Основной код:

function MyDropdownSelect(props: MyDropdownSelectPropsType): NativeSelect {
    const dropdownSelectStyle: JSON = useStyles();
    return (
        <NativeSelect
            className={dropdownSelectStyle.root}
            input={<InputBase/>}
            IconComponent={ExpandMore}
            {...props}
        >
            {
                dropdownElements.map((currEntry: string): HTMLOptionElement => (
                    <option key={currEntry} value={currEntry}>
                        {currEntry}
                    </option>
                ))
            }

        </NativeSelect>
    );
}

Разве это не должно работать ??

Codesandbox добавлен (05/11/2019) - https://codesandbox.io/s/affectionate-kowalevski-rol3v?fontsize=14

Answer 2

NativeSelect не позволяет обработчик щелчка, когда он открывается (как вы уже упоминали). Тем не менее, он допускает некоторые модификации CSS при открытии.

iconOpen .MuiNativeSelect-iconOpen Стили, применяемые к компоненту значка, если всплывающее окно открыто.

Поскольку значок, который вы хотите применить, когда он открыт, простоПеревернутая версия иконки, когда она закрыта, затем просто примените transform: rotate(180deg) к иконке, когда она открыта. Таким образом, вы также можете добавить таймер преобразования для более плавного эффекта.