React styled-components -类型“StyledComponent<”label“，any，{}，never>”不能分配给类型“never”

Question

我正在尝试使用带有typescript和BEM结构的样式组件

所以我有一个简单的例子，比如

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

我知道这是与typescript相关的，我一直在尝试修复一个接口，但无法让它工作。

我如何修复这个打字错误？

Answer 1

当您尝试在Card中分配StyledComponent时，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;

有关更多详细信息，请查看此link和demo here。

其他方法是在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;

请在这里查看此示例的demo。

希望这能对你有所帮助。

Answer 2

您正在尝试直接分配styled component，请尝试此操作

    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