时间戳

首页 > 解决方案 > 如何更改 NativeSelect 的 IconComponent 取决于它是否打开

reactjs - 如何更改 NativeSelect 的 IconComponent 取决于它是否打开

问题描述

我正在自定义 NativeSelect（在 Material UI v3 中）。我想根据 NativeSelect 是否打开/展开来更改 IconElement 。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变回。ExpandMoreNativeSelect

标签： reactjsmaterial-ui

解决方案

NativeSelect在打开时不允许单击处理程序（正如您已经提到的）。但是，它确实允许在打开时进行一些 css 修改。

iconOpen .MuiNativeSelect-iconOpen 如果弹出窗口打开，则应用于图标组件的样式。

由于您要在打开时应用的图标只是关闭时图标的倒置版本，因此只需transform: rotate(180deg)在打开时应用到图标即可。这样，您还可以在其上添加转换计时器以获得更平滑的效果。

推荐阅读