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

Question

我只想知道有没有办法把framer-motion和Material-Ui[=17一起使用=].我试过了，但我不明白。

Answer 1

你的问题让我很好奇。我从未尝试过 framer-motion，但最近打算学习它。

所以我尝试了一下，创建了一个沙箱，在其中添加了 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;

成功了！

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

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

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

下面的link可以看看： https://codesandbox.io/s/brave-sutherland-5bki9

Answer 2

我也遇到了同样的情况，所以经过一番研究，反复试验，写了一篇关于这个的小文章，希望大家能从中得到帮助，如果有任何建议，请随时在评论区。

https://aishmn.medium.com/how-to-use-material-ui-and-framer-motion-together-6026fed96a4c

Answer 3

Material-UI 具有针对此类要求的 component prop 选项，并且应该比包装方法做得更好、更优雅。然后，你可以将 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-motion？ (reactjs)(@material-ui/core)(成帧器运动)

How to use framer-motion with material-ui? (reactjs)(@material-ui/core)(framer motion)

reactjs

material-ui

framer-motion