如何用theme.transitions.create感慨？

Question

我在 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)",
  },
}));

箭头会这样旋转：

但是我似乎无法使用 Material-UI 的 v5 复制它。我试过使用 sx 道具，带有条件渲染，它会转动但不会动画。

Answer 1

这应该是您要查找的内容：

<Button
  aria-expanded={optionsExpanded}
  onClick={() => dispatch(toggleOptionsExpanded())}
  endIcon={
    <ExpandMoreIcon
      sx={[
        {
          transform: 'rotate(0deg)',
          transition: (theme) => theme.transitions.create('all', {
            duration: theme.transitions.duration.shortest,
          })
        },
        optionsExpanded && {
          transform: 'rotate(180deg)'
        }
      ]}
    />
  }
>
  Options
</Button>

如何用theme.transitions.create感慨？

How to use theme.transitions.create with emotion?

emotion

reactjs

material-ui