flexdinesh / flexdinesh/react-socks

Typescript error with `style` prop

Open
#53 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
424
Forks
27
PR merge metrics
No merged PRs in 30d

Description

Here's a basic example which shows the issue: https://codesandbox.io/s/nifty-river-olt52e?file=/src/App.tsx

When we add a styles prop to a Breakpoint we get a Typescript error:

```ts
No overload matches this call.
Overload 1 of 2, '(props: Props | Readonly): Breakpoint', gave the following error.
Type '{ children: string; style: { background: string; }; sm: true; down: true; }' is not assignable to type 'Readonly'.
Property 'style' is incompatible with index signature.
Type '{ background: string; }' is not assignable to type 'ReactNode'.
Property 'background' does not exist on type 'ReactElement> | ReactFragment | ReactPortal'.
Overload 2 of 2, '(props: Props, context: any): Breakpoint', gave the following error.
Type '{ children: string; style: { background: string; }; sm: true; down: true; }' is not assignable to type 'Readonly'.
Property 'style' is incompatible with index signature.
Type '{ background: string; }' is not assignable to type 'ReactNode'.
Property 'background' does not exist on type 'ReactElement> | ReactFragment | ReactPortal'.ts(2769)
```

Essentially the problem is the `[key: string]: React.ReactNode | string | boolean;` on `ReactSocks.Props`

One way to fix it is to change it to this:

`[key: string]: React.ReactNode | React.CSSProperties | string | boolean;`

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.