你如何将 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 }} />