How to create a styled component for framer motion components?

[frankandrobot]

The following doesn't compile for me:

import {  motion } from "framer-motion";
import { styled } from "../styled-system/jsx";

const PanelContainer = styled(motion.div, {
  base: {
    width: "100%",
    height: "100%",
  },
});

so far so good, but then when i try to use this with valid framer motion props, i get a compiler error:

   <PanelContainer
          transition={{
            // compile error --- even though this is a valid framer-motion property
            x: { type: "spring", stiffness: 300, damping: 30 },
            opacity: { duration: 0.2 },
          }}
    />

[astahmer]

what is the compiler error you get ?

---

also, I havent tested it but someone from the Panda CSS discord got it working with something like this:

import { Box, } from "@panda/jsx";
import { motion } from "framer-motion";

const MotionBox = motion(Box);

[frankandrobot]

@astahmer - here is the compiler error. Note: it looks like the code works despite not compiling.

(property) type: string
Type '{ x: { type: string; stiffness: number; damping: number; }; opacity: { duration: number; }; }' is not assignable to type 'ConditionalValue<"background" | "shadow" | "opacity" | "transform" | "common" | "colors" | Transition<string & {}> | Transition<string & {}>[] | undefined>'.
  Object literal may only specify known properties, and 'x' does not exist in type 'Transition<string & {}>[] | ("background" | "shadow" | "opacity" | "transform" | "common" | "colors" | Transition<string & {}> | Transition<string & {}>[] | null | undefined)[] | { ...; }'.ts(2322)
style-props.d.ts(525, 2): The expected type comes from property 'transition' which is declared here on type 'IntrinsicAttributes & Omit<WithHTMLProps<ComponentProps<ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>>>, "base" | ... 648 more ... | "css"> & Omit<...>'

[frankandrobot]

also, I havent tested it but someone from the Panda CSS discord got it working with something like this:

Oh i see... going the reverse.