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 |