reactjs - 你如何一起使用 Framer Motion + Styled Components？

Question

我想同时使用 Styled Components 和 Framer Motion 来设置样式和动画……我可以使用 SC 或 FM 中的变量来设置样式和动画吗？

什么是例子？

Answer 1

您应该能够将样式化函数用作任何运动组件的 HOC

import styled from "styled-components";
import { motion } from "framer-motion";

const AnimatedDiv = styled(motion.div)`
  background-color: rebeccapurple;
  width: 200px;
  height: 200px;
`;

这允许您像这样使用组件：

<AnimatedDiv animate={{ scale: 3 }} />

Answer 2

最好的方法是使用as道具：

<StyledComponent as={motion.div}/>

正如您所说，这保持了framer-motion“可变性”的意图，能够轻松地将 DOM 元素替换为其运动对应物。

这在网上很难找到，所以我想把它贴出来。