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

[peduarte]

To repro:

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

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

[jonathantneal]

Replication @ https://codesandbox.io/s/ecstatic-mayer-lobwy?file=/src/App.tsx

[janhoogeveen]

If you want to update Stitches to the latest version but you're running into this issue... you can put // @ts-expect-error above the prop that's throwing the error and you can continue with your project.

[KirdesMF]

maybe this is coming from the as prop types as never in the styled-component.d.ts . I guess it could be type as keyof JSX.IntrinsicElements or something like that

[csantos-nydig]

I have a scenario somewhat related:

const Box = styled('div', {
  color: 'red'
});

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

export function MyBox(props: MyBoxProps) {
  return <Flex as={props.as} size={props.size} />;
}

[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

[hainessss]

Please reopen. This issue persists.

[rntvicente]

Hi,

This issue persits with me.

Configurations

• @nrwl: 14.4.2
• next: 12.1.6
• react: 18.2.0
• react-dom: 18.2.0
• @stitches/react: 1.2.8

[s-h-a-d-o-w]

If someone still stumbles across this - check whether you're using multiple levels of nesting. Because I have found that to be an issue: https://github.com/stitchesjs/stitches/issues/1105