6

我只想知道是否有办法将framer-motion与Material-Ui一起使用。我试过了，但我没有得到它。

4

3 回答 3

34

Material-UI有component针对这种要求的 prop 选项，并且应该比 wrapping-approach 做得更好、更优雅。然后，您可以将包提供的任何道具传递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>
于 2021-01-12T10:19:57.913 回答
5

你的问题让我很好奇。我从未尝试过 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;

它奏效了！

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

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

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

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

于 2020-12-11T14:21:02.733 回答
3

我也遇到了同样的情况，所以经过一些小研究和一些尝试和错误，我写了一篇关于此的小文章，希望大家能从中得到帮助，如果有任何建议，请随时在评论部分详细说明。

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

于 2021-01-03T11:34:59.677 回答