How to create a react component with 'as' props and use it with styled-components?

Viewed 20

i am trying to create a type for PolymorphicComponents (with 'as' prop).

Independently it is working.

export type PolymorphicComponentProps<C extends ElementType, Props> = Props & {
  as?: C;
} & ComponentPropsWithoutRef<C>;

However when i try to use it with styled-components all props disappear from type checking:

declare function MyComponent<C extends ElementType>(
  props: PropsWithChildren<PolymorphicComponentProps<C, { prop: "mandatory" }>>
): JSX.Element;

const Override = styled(MyComponent)``;

function Test() {
  return <Override prop="no type checking" />; // here we do not have any errors, but should
}

Also inside MyComponent when i use some styled component i still have no type checker

Here is codesandbox https://codesandbox.io/s/styled-components-as-prop-8n5rsm?file=/src/App.tsx

0 Answers
Related