Problem with Typescript + Styled-Components

Question

Good afternoon!

I am starting to use Typescript and came across some problems in the configuration of the React project, using Typescript and Styled-Components! I am using module statement, extending the theme and applying Generics to the types, but they are simply ignored!

Follow the above error, as you can see, "Theme" is working correctly, however, the link, hasIcon, etc properties are being ignored even if there is an interface within Styled.

Someone would know how to fix this?

Thank you!

Answer 1

To use the props in your Button, use a interface instead of type, may also declare Theme and the disabled in it, which makes more explicit about what this interface means.

Try replacing the type therefore:

interface TStyles {
    fullWidth: boolean
    hasIcon: boolean
    margin: string
    disabled: boolean
    theme: SEU_TIPO_DE_TEMA_UTILIZADO
}