如何在material-ui中使用framer-motion？(reactjs)(@material-ui/core)(成帧器运动)

Material-UI有component这种要求的道具选项，应该比包装方法做得更好，更优雅。然后，您可以将framer-motion包提供的任何道具传递给您的Material-UI组件，只要它们不发生冲突（我不确定是否有冲突）。

 <Button
  color="inherit"
  variant='contained'
  size="large"
  component={motion.div}
  whileHover={{
    scale: 1.2,
    transition: { duration: 0.3 }
  }}
  whileTap={{ scale: 0.9 }}
>
  Button
</Button>

你的问题让我很好奇。我从未尝试过成帧运动，但最近打算学习它。

所以我试了一下，创建了一个沙箱，在里面添加了一个 Material UI 和 framer 运动包。

刚刚使用 Material UI 在页面中间创建了一个小按钮。并使用<motion.div>标签包裹按钮，如下所示：

import React from "react";
import { motion } from "framer-motion";
import Button from "@material-ui/core/Button";

function AnimatableDiv() {
  return (
    <motion.div
      className="animatable"
      whileHover={{
        scale: 1.2,
        transition: { duration: 0.3 }
      }}
      whileTap={{ scale: 0.9 }}
    >
      <Button size="large" className="animatable">
        Button
      </Button>
    </motion.div>
  );
}

export default AnimatableDiv;

它奏效了！

您可能会想，如果我motion.直接在<Button>组件上使用 the 会怎样，如下所示：

<motion.Button size="large" className="animatable">
  Button
</motion.Button>

嗯，我确实想到了这一点，我也应用了它，但 Material UI 应用于该按钮的所有样式都丢失了！所以不要遵循这种方法！我重复不要！

这里的链接可以看看：https :
//codesandbox.io/s/brave-sutherland-5bki9