styled-components withTheme HOC ne fonctionne pas avec les types React.FC

Question

Je construis des composants avec React.FC typescript et aujourd'hui j'ai trouvé cette erreur de type script en essayant d'injecter les props du composant stylé en utilisant withTheme HOC de styled-components :

Il semble que withTheme HOC n'accepte que React.ComponentType comme paramètre, mais le composant a été construit en utilisant React.FC (Composant fonctionnel).

Y a-t-il un moyen de lancer React.FC a React.ComponentType ?

UPDATE

La mise en œuvre complète du composant :

import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import { Reset, LoadingBarStyled, SpinnerContainer } from './Style'
import { withTheme } from 'styled-components'
import ScaleLoader from 'react-spinners/ScaleLoader'

export interface ILoadingBarComponent {
    progress: number
    appearance?: string
    onFinish(finished: Promise<string>): void
}

const LoadingBarComponent: React.FC<ILoadingBarComponent> = ({
    progress = 0,
    appearance = 'default',
    onFinish
}) => {
    useEffect(() => {
        if (progress >= 100 && onFinish) {
            onFinish(
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('finished')
                    }, 800)
                })
            )
        }
    }, [progress, onFinish])
    return (
        <div className="loading-bar-component-module">
            <Reset />
            {progress > -1 && progress < 101 && (
                <>
                    <LoadingBarStyled progress={progress} appearance={appearance} />
                    <SpinnerContainer progress={progress}>
                        <ScaleLoader height={10} />
                    </SpinnerContainer>
                </>
            )}
        </div>
    )
}

LoadingBarComponent.propTypes = {
    progress: PropTypes.number.isRequired,
    appearance: PropTypes.string,
    onFinish: PropTypes.func.isRequired
}
export default withTheme(LoadingBarComponent)

Answer 1

Vous devez ajouter un theme à l'interface props de votre composant :

interface Theme {}

export interface ILoadingBarComponent {
  progress: number
  appearance?: string
  onFinish(finished: Promise<string>): void
  theme: Theme
}