React styled-components - Type 'StyledComponent<"label", any, {}, never>' is not assignable to type 'never'

Question

I'm trying to use styled-components with typescript and with a BEM structure

So I have a simple example like

index.tsx

import styled from 'styled-components'
import Header from './Header'

interface ICard {
    Header:
}

const Card = styled.div`
    border: 1px solid gray;
    padding: 10px;
`

Card.Header = Header

export default Card

Header.tsx

import styled from 'styled-components'

const Header = styled.h1`
    color: #313c53;
    font-size: 1.2em;
    line-height: 1.5;
`
export default Header

And in the mark up

<Card>
    <Card.Header>
        Header
    </Card.Header>
</Card>

My problem is in the index.tsx, I'm getting an error here Card.Header = Header

Type 'StyledComponent<"label", any, {}, never>' is not assignable to type 'never'.ts(2322)

I know this is typescript related and I have been trying to fix an interface but can't get it to work.

How can I fix this typescript error?

Southwestwards

In Header, you export Label, instead of exporting Header – Puberty

Sorry that was a mistake here, in the code exports Header, I'll update it here now – Southwestwards

Answer 1

As you're trying to assign the StyledComponent inside Card and Card is created as StyledComponent.

Please use following code,

import styled from "styled-components";
import Header from "./header";

const Card: any = styled.div`
    border: 10px solid green;
    padding: 10px;
`;

Card.header = Header;

export default Card;

for more details please check this link and demo here.

Other ways are to create an Interface in TypeScript can be used to define a type.

Please see following code for same,

import styled, { StyledComponentBase } from "styled-components";
import Header from "./header";

interface ICard extends StyledComponentBase<any, {}> {
    header?: any;
}

const Card: ICard = styled.div`
    border: 10px solid green;
    padding: 10px;
`;

Card.header = Header;

export default Card;

Please check the demo for this example [here][3].

Hope this will help you.

Catlett

Answer 2

You're trying to assign directly the styled-component, try this instead

    import styled from 'styled-components'
    import Header from './Header'

    interface ICard {
      Header:
    }

    const Card = styled.div`
      border: 1px solid gray;
      padding: 10px;
    `

    Card.Header = styled(Header)` /* here you should assign a value to Card.Header */
      /* Some style here */
    `

    export default Card

Topology

Can you provide a reproduction, please ? When I try here, it works fine: codesandbox.io/s/vigilant-neumann-95l65 – Topology

I'm still getting the same error but in my app I have installed @types/styled-components. I forked your example and added @types/styled-components. Here the app still works but you can see the error in card.tsx. Card.header = Header; has the error Type 'StyledComponent<"h1", any, {}, never>' is not assignable to type 'never'.ts(2322). - codesandbox.io/s/cool-banach-p27he?file=/src/card.tsx – Southwestwards

Answer 3

If you don't want to use any with Typescript, you can change a bit the working solution of Santosh by doing:

        import React, { ReactNode } from "react";
        import styled, { StyledComponentBase } from "styled-components";
        import Header from "./header";

        interface ICard extends StyledComponentBase<React.ComponentType, object>
           header?: ReactNode;
        }

        const Card: ICard = styled.div`
            border: 10px solid green;
            padding: 10px;
        `;

        Card.header = Header;

        export default Card;

Here is the demo link updated

Tearle