TypeScript and styled-components: No overload matches this call

Viewed 1099

I can't understand the error message TypeScript is throwing and don't know how to fix it.

The component:

import styled, { css } from 'styled-components'

interface IHeader {
  selected: boolean
  children: string
}

const Header = styled.h6<IHeader>`
  color: #fff;
  padding: 5px 0;

  ${(props) =>
    props.selected &&
    css`
      color: #fff;
    `};
`

Header.defaultProps = {
  selected: false,
}

const Component = () => (
  <>
    <Header>children text</Header>
  </>
)

export { Component }

The error message:

TypeScript error in [...]/Bids.tsx(25,6):
No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & IHeader, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Property 'selected' is missing in type '{ children: string; }' but required in type 'Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & IHeader, never> & Partial<...>, "theme">'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"h6", DefaultTheme, IHeader, never, "h6", "h6">): ReactElement<StyledComponentPropsWithAs<"h6", DefaultTheme, IHeader, never, "h6", "h6">, string | JSXElementConstructor<...>>', gave the following error.
    Property 'selected' is missing in type '{ children: string; }' but required in type 'Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & IHeader, never> & Partial<...>, "theme">'.  TS2769

    23 | const Bids = () => (
    24 |   <>
  > 25 |     <Header>children text</Header>
       |      ^
    26 |   </>
    27 | )
    28 |
1 Answers

You need to specify that selected is optional.

interface IHeader {
  selected?: boolean
  children: string
}
import styled, { css } from 'styled-components'

interface IHeader {
  selected?: boolean
  children: string
}

const Header = styled.h6<IHeader>`
  color: #fff;
  padding: 5px 0;

  ${(props) =>
    props.selected &&
    css`
      color: #fff;
    `};
`

Header.defaultProps = {
  selected: false,
}

const Component = () => (
  <>
    <Header>children text</Header>
  </>
)

export { Component }
Related