Реагируйте, styled-компоненты, ошибки машинописи

Question

У меня есть демо здесь

Я использую стилевые компоненты в приложении React.

Я хотел структурировать именование с помощью структуры, подобной БЭМ.

Я использую примеры в статье - https://tech.decisiv.com/structuring-our-styled-components-part-i-2bf21fa64b28

Я также хотел использовать машинопись, где я получаю свои ошибки

Моя демонстрация работает, но у меня есть ошибки, которые совпадают с моим настоящим приложением, но там приложение не загружается.

Ошибки находятся в App.tsx <Card.header>Header</Card.header>

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

и в card.tsx Card.header = Header;

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

Я изучил эти ошибки, но не могу найти решение.

Кто-нибудь знает, как я могу исправить эти ошибки.

Answer 1

При назначении другого элемента в Card и создании Card с помощью StyledComponent.

Вы можете исправить свой код следующим образом,

        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;

для подробнее см. здесь ссылка и демо здесь .

Другие способы создания интерфейса в TypeScript могут использоваться для определения типа.

Пожалуйста, смотрите следующий код для того же самого,

        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;

Пожалуйста, проверьте демо для этого примера здесь .

Надеюсь, это поможет вам.