Skip to content

Typescript error with style prop #53

Description

@mjfwebb

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:

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions