TS error when using `as` + variant with composed components

To repro:

const Box = styled('div', {
  variants: {
    size: {
      small: {}
    }
  }
});
const Flex = styled(Box, {})

export function Component() {
  return <Flex as="article" size="small" />;
}

[LucasUnplugged]

type MyBoxProps = { // — how do I get the as prop type here? — // }

Based on what I can see in the code, this should work:

// Put this in your stitches.config.ts file
export type Polymorphic = string | React.ComponentType<any>

// In your components
type MyBoxProps = {
  as: Polymorphic,
}

Mind you, IIRC, React has a type for HTML element strings, but that may conflict with Stitches’ types once you try to pass it in, I’m not sure. If anyone tries it out, please let us know how it went 😃

[ChrisDalley]

Hi @hadihallak - I’m still seeing Polymorphic as typescript errors when composing components even when using the latest 1.2.7-0 canary build (unless I’m misunderstanding how this should work with Stitches) - I’ve put together a code sandbox showing the issue here https://codesandbox.io/s/stitches-polymorphic-inheritance-typescript-error-d1xn1o?file=/src/Paragraph.component.tsx