CODEWITHSUNDEEP
reactjstypescriptstyled-components
xypnox
xypnox

Reputation: 196

Forwarding InnerRef on a styled-component gives typescript error

Forwarding innerRef to a styled-component as shown below gives the following type error in typescript:

interface MenuProps {
  isOpen: boolean
}

const BaseMenu = styled.ul<MenuProps>`
  padding: 0;
  /* ... styles ... */
  ${({ isOpen }) =>
    !isOpen &&
    css`
      border: none;
    `}
`

const Menu = React.forwardRef((props, ref) => <BaseMenu innerRef={ref} {...props} />)

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & MenuProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children?: ReactNode; innerRef: ForwardedRef<unknown>; }' is not assignable to type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & MenuProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.
      Property 'innerRef' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & MenuProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"ul", DefaultTheme, MenuProps, never, "ul", "ul">): ReactElement<StyledComponentPropsWithAs<"ul", DefaultTheme, MenuProps, never, "ul", "ul">, string | JSXElementConstructor<...>>', gave the following error.
    Type '{ children?: ReactNode; innerRef: ForwardedRef<unknown>; }' is not assignable to type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & MenuProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.
      Property 'innerRef' does not exist on type 'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & MenuProps, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.ts(2769)

I have tried removing isOpen and type interface as well, but both result in same error.

Update

Codesandbox file with the error: https://codesandbox.io/s/purple-silence-idz52?file=/src/Menu.tsx

Upvotes: 1

Views: 1452

Answers (1)

Viet
Viet

Reputation: 12787

Because the ul tag don't have property innerRef. Just change innerRef to ref

You should add type for ref and props like this:

const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => (
  <BaseMenu ref={ref} {...props} />
));

https://codesandbox.io/s/nervous-violet-l7xb1?file=/src/Menu.tsx

Upvotes: 2

Related Questions