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>
CodePudding user response:
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.