Реагировать на styled-components - Тип 'StyledComponent <"label", any, {}, never>' нельзя назначить типу 'never'

Question

Я пытаюсь использовать стилевые компоненты с машинописным текстом и структурой БЭМ

Поэтому у меня есть простой пример, такой как

// 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

И в разметке

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

Моя проблема в index.tsx, здесь я получаю ошибку Card.Header = Header

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

Я знаю, что это связано с машинописью, и я пытался исправить интерфейс, но не могу заставить его работать.

Как я могу исправить эту ошибку машинописи

Answer 1

Вы пытаетесь назначить непосредственно стилевой компонент, попробуйте вместо этого

    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

Answer 2

Когда вы пытаетесь присвоить StyledComponent внутри 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;

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

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