Question

我正在自定义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图标，而在ExpandMore关闭时，请回到NativeSelect。

Answer 1

NativeSelect不允许在打开时使用点击处理程序（如前所述）。但是，它确实允许在打开时进行一些CSS修改。

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

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

Answer 2

尽管使用上面的建议，仍然有问题。我的代码

样式：

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>
    );
}

这不是应该做的吗？

已添加代码和框（2019年5月11日）-https://codesandbox.io/s/affectionate-kowalevski-rol3v?fontsize=14

如何更改NativeSelect的IconComponent，是否打开

2 个答案: