我在 Material-UI v4 中有这段代码,运行得很好:
<Button
aria-expanded={optionsExpanded}
onClick={() => dispatch(toggleOptionsExpanded())}
endIcon={
<ExpandMoreIcon
className={clsx(classes.expand, {
[classes.expandOpen]: optionsExpanded,
})}
/>
}
>
Options
</Button>
const useStyles = makeStyles((theme) => ({
expand: {
transform: "rotate(0deg)",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest,
}),
},
expandOpen: {
transform: "rotate(180deg)",
},
}));
Run Code Online (Sandbox Code Playgroud)
箭头将像这样旋转:
然而,我似乎无法使用 Material-UI v5 来复制这一点。我尝试过使用sx带有条件渲染的道具,它会转动但不会产生动画。