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

【问题标题】：How can I add a StyledComponent as a property to a another StyledComponent in TypeScript?如何将样式化组件作为属性添加到 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 中重现这个吗？更容易看到你到目前为止所做的事情并以这种方式提供帮助

标签： typescript react-native styled-components mobile-development react-typescript

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