Typescript error for emotion styled component with forwardRef

46 views Asked by At

I have an issue with typescript when I want to use a styled component with a forwardRef that I don't know how to solve.

The only solution I have so far is using typecasting. I am not a fan of that because you are forcing a type that is not true.

styled(Component as FunctionComponent)

import styled from '@emotion/styled';
import React, { forwardRef } from 'react';

type Props = {
  className?: string;
};

const Component = forwardRef<HTMLDivElement, Props>(({ className }, ref) => (
  <div ref={ref} className={className}>
    Component + forwardRef
  </div>
));

const StyledComponent = styled(Component)`
  // Custom styling
`;

enter image description here

No overload matches this call.
  Overload 1 of 6, '(component: ComponentClass<Props & RefAttributes<HTMLDivElement>, any>, options?: StyledOptions<Props & RefAttributes<HTMLDivElement>> | undefined): CreateStyledComponent<...>', gave the following error.
    Argument of type 'ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>>' is not assignable to parameter of type 'ComponentClass<Props & RefAttributes<HTMLDivElement>, any>'.
      Type 'ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>>' provides no match for the signature 'new (props: Props & RefAttributes<HTMLDivElement>, context?: any): Component<Props & RefAttributes<HTMLDivElement>, any, any>'.
  Overload 2 of 6, '(component: ComponentType<Props & RefAttributes<HTMLDivElement>>, options?: StyledOptions<(Props & RefAttributes<HTMLDivElement>) | (Props & ... 1 more ... & { ...; })> | undefined): CreateStyledComponent<...>', gave the following error.
    Argument of type 'ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>>' is not assignable to parameter of type 'ComponentType<Props & RefAttributes<HTMLDivElement>>'.
      Type 'ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>>' is not assignable to type 'FunctionComponent<Props & RefAttributes<HTMLDivElement>>'.
        Type 'ReactNode' is not assignable to type 'ReactElement<any, any> | null'.
  Overload 3 of 6, '(tag: keyof IntrinsicElements, options?: StyledOptions<SVGProps<SVGSymbolElement> | DetailedHTMLProps<ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement> | ... 120 more ... | SVGProps<...>> | undefined): CreateStyledComponent<...>', gave the following error.
    Argument of type 'ForwardRefExoticComponent<Props & RefAttributes<HTMLDivElement>>' is not assignable to parameter of type 'keyof IntrinsicElements'.ts(2769)```
0

There are 0 answers