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

【问题标题】：React styled-components - Type 'StyledComponent<"label", any, {}, never>' is not assignable to type 'never'React styled-components - 类型 'StyledComponent<"label", any, {}, never>' 不能分配给类型 'never'
【发布时间】：2020-07-29 21:59:26
【问题描述】：

我正在尝试将 styled-components 与 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)

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

如何解决这个打字稿错误

【问题讨论】：

在Header中，你导出Label，而不是导出Header
抱歉这里打错了，在代码导出的Header中，我现在在这里更新一下

标签： reactjs typescript styled-components

【解决方案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

【讨论】：

你能提供一个复制品吗？当我在这里尝试时，它工作正常：codesandbox.io/s/vigilant-neumann-95l65
我仍然遇到同样的错误，但在我的应用程序中我安装了@types/styled-components。我分叉了您的示例并添加了@types/styled-components。在这里，该应用程序仍然有效，但您可以在 card.tsx 中看到错误。 Card.header = Header; 有错误 Type 'StyledComponent<"h1", any, {}, never>' is not assignable to type 'never'.ts(2322)。 - codesandbox.io/s/cool-banach-p27he?file=/src/card.tsx

【解决方案2】：

当您尝试在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;

请查看此示例的演示 [此处][3]。

希望这会对你有所帮助。

【讨论】：