Как вы используете вместе компоненты Framer Motion + Styled?

Question

Я хочу использовать стилизованные компоненты и Framer Motion вместе для стилизации и анимации .... Могу ли я использовать переменную из S C или FM для стилизации и анимации?

Какой пример?

Answer 1

Вы должны иметь возможность использовать стилизованную функцию как HO C для любого компонента движения

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 }} />