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

Question

我正在尝试将样式组件与打字稿和 BEM 结构一起使用

所以我有一个简单的例子

索引.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)

我知道这是与打字稿相关的，我一直在尝试修复界面，但无法让它工作。

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

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]查看此示例的演示。

希望对你有帮助。