styled components jsxStyleProps #2668

EpsilonEpsilon · 2024-06-12T21:55:25Z

EpsilonEpsilon
Jun 12, 2024

Hi, I'm new to Panda CSS, and while reading the docs, I found this example:

const Page = ()=>{
    return (
        <styled.button marginTop="40px">

        </styled.button>
    )
}

But it doesn't work for me. I'm getting the following error:

TS2786: 'styled.button' cannot be used as a JSX component.   Its type 'StyledComponent<"button">' is not a valid JSX element type.     Type 'StyledComponent<"button">' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.       Type '(props: ComponentProps<"button">) => Element' is not assignable to type 'ReactNode'.

This one also doesn't work:

const Container = styled("div", {
    base:{
        bg:"red",
    }
})
TS2554: Expected 1 arguments, but got 2.

And something like this is working...

Here is my Panda CSS configuration:

import { defineConfig } from "@pandacss/dev";

export default defineConfig({
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {},
  },

  // The output directory for your css system
  outdir: "styled-system",

  // The JSX framework to use
  jsxFramework: "react",
  jsxStyleProps:"all",
  // The CSS Syntax to use to use
  syntax: "template-literal",
});

I would be glad to get any help with this.