No overload matches this call Error on TSX

Question

I am new to React and TypeScript.

I passed the propTypes into a styled-component and it showed me this error:

No overload matches this call.

Overload 1 of 2, '(props: { order: Order; client: Client; orderDetail: OrderDetails; confirmation: Confirmation; shipping: Shipping; payment: Payment; ... 255 more ...; onTransitionEndCapture?: TransitionEventHandler<...>; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.

Type '{ children: Element[]; }' is missing the following properties from type '{ order: Order; client: Client; orderDetail: OrderDetails; confirmation: Confirmation; shipping: Shipping; payment: Payment; ... 255 more ...; onTransitionEndCapture?: TransitionEventHandler<...>; }': order, client, orderDetail, confirmation, and 2 more.

Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, OrderCardProps, never, "div", "div">): ReactElement<StyledComponentPropsWithAs<"div", any, OrderCardProps, never, "div", "div">, string | JSXElementConstructor<...>>', gave the following error.

Type '{ children: Element[]; }' is missing the following properties from type '{ order: Order; client: Client;....255 more ...; onTransitionEndCapture?: TransitionEventHandler<...>; }': order, client, orderDetail, confirmation, and 2 more.ts(2769)

styles.ts

export const StatusLayout = styled.div<OrderCardProps>`
display: flex;
> div {
    width: 40px;
    height: 40px;
    margin: auto 2px;

componant.tsx

export interface OrderCardProps {
order: Order
client: Client
orderDetail: OrderDetails
confirmation: Confirmation
shipping: Shipping
payment: Payment
}

export const OrderCard: React.FC<OrderCardProps> = ({ order, ...}) => { return ( ....
...
...
<StatusLayout>
    <div>
        <Icon size={"l"} color={colors.blueDark3} children={<MdPermPhoneMsg/>}/>
    </div>

The ERROR is in <StatusLayout>

Answer 1

The error message says that you call your <StatusLayout> component but without the mandatory props that you declared in its definition const StatusLayout = styled.div<OrderCardProps>

For example you could call it like:

<StatusLayout
  order={myOrder}
  client={someClient}
  orderDetail={myOrderDetail}
  confirmation={someConfirmation}
  shipping={theShipping}
  payment={andThePayment}
>
  // children...
</StatusLayout>

That being said, since <StatusLayout> is just a styled div, all these props can only be used in the style definition (because styled-components will not pass them to the div), which is unlikely, so it is questionable why you need them.