Progress component of Ant Design doesnt work with Styled Components

Viewed 210

Problem: I have types problem using Ant Design with Styled Components, especially with Progress component. I have "@types/styled-components": "^5.1.24". Looks like Progress component is not a component like Button or Input from Ant Design.

Code in editor:

import styled from "styled-components";
import { Progress, Button } from 'antd'
export const StyledProgress = styled(Progress)`` // error
export const StyledButton = styled(Button)`` // ok

Error code:

TS2769: No overload matches this call.   
Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, DefaultTheme, any, any>', gave the following error.     
Argument of type 'typeof Progress' is not assignable to parameter of type 'AnyStyledComponent'.

I solved this by

export const StyledProgress = styled(Progress as unknown as AnyStyledComponent)``

But I think its kinda weird

Error example on the screen below

enter image description here

Expected: Progress component works with styled-components like any other component from Ant Design

Received: Type Error for Progress component

Question: Could you tell me please how to solve this problem without this manipulation?

0 Answers
Related