如何根据NativeSelect是否打开来更改其IconComponent
如何根据NativeSelect是否打开来更改其IconComponent
提问于 2019-11-01 16:50:44
我正在自定义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在NativeSelect打开时是ExpandLess图标，在NativeSelect关闭时改回ExpandMore图标。
回答 2
Stack Overflow用户
发布于 2019-11-01 18:35:01
NativeSelect不允许在打开时使用单击处理程序(正如您已经提到的)。但是，它确实允许在打开时对css进行一些修改。
iconOpen .MuiNativeSelect-icon弹出窗口打开时应用于图标组件的打开样式。
由于您想要在打开时应用的图标只是关闭时图标的倒置版本，因此只需在图标打开时对其应用transform: rotate(180deg)即可。这样，您还可以在其上添加变换计时器以获得更平滑的效果。
Stack Overflow用户
发布于 2019-11-04 16:23:40
尽管使用了上面的建议，仍然有问题。我的代码
设置样式：
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新增(2019年5月11日) -https://codesandbox.io/s/affectionate-kowalevski-rol3v?fontsize=14
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58662935
复制相关文章
相似问题
腾讯云开发者
