我想在扩展自动完成组件时旋转 Material UI的自动完成图标。
这是自动完成的演示:
https://codesandbox.io/s/0xx573qrln
任何帮助是极大的赞赏。
最佳答案
您可以使用react-select的components.DropdownIndicator
属性。
组件的当前状态可以通过组件的selectProps
属性访问。
我遇到了同样的挑战,这就是我的做法:
// Select.js
const styles = theme => ({
dropdown: {
transition: theme.transitions.create(["transform"], {
duration: theme.transitions.duration.short
})
},
dropdownOpen: {
transform: "rotate(-180deg)"
},
dropdownClosed: {
transform: "rotate(0)"
}
})
function DropdownIndicator(props) {
return (
<KeyboardArrowDown
className={[
props.selectProps.classes.dropdown,
props.selectProps.menuIsOpen
? props.selectProps.classes.dropdownOpen
: props.selectProps.classes.dropdownClosed
]}
/>
);
}
const components = { DropdownIndicator };
export function Select(props) {
return <Select componenets={components} {...props} />
}
希望您能够自己解决挑战。
演示(从上面的链接 fork ):https://codesandbox.io/s/material-demo-b9frk
关于reactjs - Material UI自动完成旋转图标展开或折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53537680/