如何将样式化组件作为属性添加到 TypeScript 中的另一个样式化组件？

Posted 2023-03-13

【中文标题】如何将样式化组件作为属性添加到 TypeScript 中的另一个样式化组件？

【英文标题】：How can I add a StyledComponent as a property to a another StyledComponent in TypeScript?

【发布时间】：2021-07-02 07:26:56

【问题描述】：

This is what I'm trying to do. It works just fine in javascript but not in TS

export const Container = styled.View`
    align-items: center;
`;

Container.Title = styled.Text`
    font-family: Poppins-Regular;
    color: #000000;
    font-size: 20px;
`;

Property 'Title' does not exist on type 'StyledComponent<typeof View, DefaultTheme, , never>'.

【问题讨论】：

你能在 CodeSandbox 中重现这个吗？更容易看到你到目前为止所做的事情并以这种方式提供帮助

【参考方案1】：

来自文档：

To prevent TypeScript errors on the css prop on arbitrary elements, install
@types/styled-components and add the following import once in your project:

import  from 'styled-components/cssprop'

所以尝试运行 npm install --save-dev @types/styled-components 并在某处添加该导入。

来源：https://styled-components.com/docs/api#usage-with-typescript

【讨论】：

谢谢，这解决了问题。我只需要将 import from 'styled-components/cssprop' 更改为 import * as types from 'styled-components/cssprop' 因为找不到模块 cssprop