reactjs - React styled-components - 类型 'StyledComponent<"label", any, {}, never>' 不可分配给类型 'never'

Question

我正在尝试使用带有打字稿和 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

//头文件.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)

我知道这与打字稿有关，我一直在尝试修复界面但无法使其正常工作。

如何修复此打字稿错误

标签： reactjstypescriptstyled-components

Answer 1

当您尝试分配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]。

希望这会帮助你。