React, styled-components, typescript errors

Question

I have a demo here

I'm using styled-components in a React app.

I wanted to structure the naming with a BEM like structure.

I'm using the examples in the article - https://tech.decisiv.com/structuring-our-styled-components-part-i-2bf21fa64b28

I also wanted to use typescript which is where I'm getting my errors

My demo works but I have errors that are the same as my actual app but there the app fails to load.

The errors are in App.tsx <Card.header>Header</Card.header>

JSX element type 'Card.header' does not have any construct or call signatures.ts(2604)

and in card.tsx Card.header = Header;

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

I have looked into these errors but can't find solution.

Does anyone know I how I might be able to fix these errors.

Just wondering, what exactly Card.header = Header; is this supposed to achieve..? What do you want to achieve? Some kinda inheritance pattern? — wentjun
– wentjun, Commented Apr 19, 2020 at 15:59
Please check the demo here codesandbox.io/s/cranky-sutherland-n4vb7 — Santosh Shinde
– Santosh Shinde, Commented Apr 19, 2020 at 16:17

Santosh Shinde · Accepted Answer · 2020-04-19 17:30:58Z

As you assign another element in Card and you have created Card with StyledComponent.

You can fix your code in the following way,

        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.

Hope this will help you.

Collectives™ on Stack Overflow

React, styled-components, typescript errors

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related