React Native typescript 样式组件不接受额外的 prop

Question

我正在尝试在 React Native 项目中使用样式组件，但是当我使用该组件时，打字稿无法识别我想要传递用于样式的附加属性。

样式组件

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

更新： 我发现了一个未解决的问题，说明了类似的问题在 github 上

Answer 1

您尝试过使用

props

吗？

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