React Native中TypeScript styled-components不识别自定义Props问题

在React Native项目中使用styled-components时，为样式组件定义额外color Prop后，TypeScript报错提示该属性不存在于ViewProps类型中，尽管组件类型显示已包含自定义Props。

样式组件代码 #

type StyledContainerProps = { color: string }

const StyledTextContainer = styled.View<StyledContainerProps>`
  background-color: ${({ color }) => color};
`;

组件使用代码 #

<StyledTextContainer color={`${colour.darken(0.4).hex()}CC`}>
   <Text style={[styles.title, styles.whiteText]}>{text}</Text>
</StyledTextContainer>

报错信息 #

No overload matches this call.

Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type '{ children: Element; color: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'color' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type '{ children: Element; color: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'color' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.

组件类型定义 #

const StyledTextContainer: IStyledComponent<"native", Substitute<ViewProps, StyledContainerProps>> & typeof View

补充说明 #

styled-components官方仓库中存在一个描述该类问题的未解决Issue。

可行解决方案 #

1. 合并ViewProps与自定义Props #

将自定义Props类型与React Native的ViewProps合并，确保TypeScript能识别所有属性：

import { ViewProps } from 'react-native';

type StyledContainerProps = ViewProps & { color: string };

const StyledTextContainer = styled.View<StyledContainerProps>`
  background-color: ${({ color }) => color};
`;

2. 使用临时属性（Transient Props） #

如果color仅用于样式计算，不需要传递给底层View组件，可使用styled-components的临时属性（以$前缀标识），绕过TypeScript对原生组件Props的校验：

type StyledContainerProps = { $color: string };

const StyledTextContainer = styled.View<StyledContainerProps>`
  background-color: ${({ $color }) => $color};
`;

使用时对应传入带前缀的属性：

<StyledTextContainer $color={`${colour.darken(0.4).hex()}CC`}>
   <Text style={[styles.title, styles.whiteText]}>{text}</Text>
</StyledTextContainer>

3. 升级依赖版本 #

部分旧版本的styled-components或其类型包存在TypeScript类型推导bug，尝试升级到最新稳定版：

npm update styled-components @types/styled-components @types/styled-components-react-native

内容的提问来源于stack exchange，提问作者Adam