Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Incomplete propTypes typing causing error with styled-components

See original GitHub issue

I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.8.4

Environment

macOS 10.13.6, chrome 70

Reproduction link

Please see the hello.tsx file, there will be an error prompt

Steps to reproduce

The following code won’t pass compilation with latest antd, styled-components, @types/react, @types/prop-types and typescript

import { Button } from "antd";
import styled from "styled-components";

const StyledButton = styled(Button)`
`;

What is expected?

The above code is compiled to js code

What is actually happening?

The above code could not be compiled because with the latest react definition, component’s or stateless component’s propTypes should include all keys from Props generics, while in current antd definitions it is not the case.

The error message is:

Argument of type 'typeof Button' is not assignable to parameter of type 'ComponentType<ButtonProps>'.
  Type 'typeof Button' is not assignable to type 'StatelessComponent<ButtonProps>'.
    Types of property 'propTypes' are incompatible.
      Type '{ type: Requireable<string>; shape: Requireable<string>; size: Requireable<string>; htmlType: Requireable<string>; onClick: Requireable<(...args: any[]) => any>; loading: Requireable<boolean | object>; className: Requireable<...>; icon: Requireable<...>; block: Requireable<...>; }' is not assignable to type 'ValidationMap<AnchorButtonProps> | ValidationMap<NativeButtonProps> | undefined'.
        Type '{ type: Requireable<string>; shape: Requireable<string>; size: Requireable<string>; htmlType: Requireable<string>; onClick: Requireable<(...args: any[]) => any>; loading: Requireable<boolean | object>; className: Requireable<...>; icon: Requireable<...>; block: Requireable<...>; }' is not assignable to type 'ValidationMap<NativeButtonProps>'.
          Property 'prefixCls' is missing in type '{ type: Requireable<string>; shape: Requireable<string>; size: Requireable<string>; htmlType: Requireable<string>; onClick: Requireable<(...args: any[]) => any>; loading: Requireable<boolean | object>; className: Requireable<...>; icon: Requireable<...>; block: Requireable<...>; }'.

Issue Analytics

State:
Created 5 years ago
Comments:10 (3 by maintainers)

Top GitHub Comments

3reactions

meel-iocommented, Nov 14, 2018

Hi @zombieJ I’m interested in submitting a PR for this. Should I try to submit a PR for each component I checked? or one with all of them?

3reactions

iRoachiecommented, Sep 15, 2018

Is there any workaround for this? Encountering this atm

Top Results From Across the Web

How To Fix Styled Components Prop Types Issue In Typescript

Let's fix this. To fix this we define a separate type for our Button Style. It is exclusive to our button styles so...

PropTypes error when using Styled Components

I'm a noobie on styled-components so I was trying to style a material-ui component that is inside a styled-component based on another material- ......

How To Handle Async Data Loading, Lazy Loading, and Code ...

When a component loads, it can start an asynchronous function, and when the asynchronous function resolves it can trigger a re-render that will ......

Tooling - styled-components

This plugin adds support for server-side rendering, minification of styles, and a nicer debugging experience. Usage. Install the babel-plugin first:.

Converting React Components to TypeScript - Tinkerer

This successfully gets rid of the propTypes error - but there's a different storm brewing.. Typing Props. Here we get a new error:...