如何在 React Native + Typescript 项目中设置样式组件的“css prop”？

Question

我正在尝试设置我的 Expo 项目，以便 Styled Components 的“css prop”与 TypeScript 正确配合使用。

到目前为止我：

• 已安装

  @types/styled-components

  、

  styled-components

  和

  babel-plugin-styled-components

  ；
• 启用 Babel 插件；
• 创建了一个

  types/styled.d.ts

  文件，我在其中定义了自己的主题，如样式组件文档所述；
• 在我的应用程序组件周围添加了一个

  ThemeProvider

  包装器并为其分配了我的主题；
• 已将

  /// <reference types="styled-components/cssprop" />

  添加到我的

  App.tsx

  的顶部
  • 我也尝试过

    import type {} from 'styled-components/cssprop';

  • 我也尝试了

    import {} from 'styled-components/cssprop';

    ，但它产生了一个错误：

    styled-components/cssprop could not be found within the project.

这让我处于一个很好的位置，我可以在任何 React 组件上使用

css

属性，并且它可以正确应用为样式。

我遇到的最后一个问题是，当我尝试使用我的主题时，如下所示，我收到一个

Parameter 'props' implicitly has an 'any' type.ts(7006)

错误：

<View
  css={`
    background-color: yellow;
    margin: ${(props) => props.theme.spacing.small}px;
  `}
>
  <Text>Hello, World!</Text>
</View>

我不知道如何从这里继续，我希望

props

参数填充我的样式组件的主题。

为了完整起见，这是我的

types/styled.d.ts

：

// import original module declarations
import 'styled-components';

// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {
    spacing: {
      small: 8;
      medium: 16;
      large: 24;
    };
  }
}

我的项目只是默认的 expo-cli typescript 模板。

Answer 1

您是否在您的

types/styled.d.ts

上尝试过以下操作

declare module 'react' {
  interface Attributes {
    css?: Interpolation<ThemeType>;
  }
}

简而言之，

CSSProp

就是

export type CSSProp = Interpolation<any>;

但由于某种原因，它没有得到您上面定义的

DefaultTheme

。

顺便说一句，您可以这样做，而不用编写主题类型。

type ThemeType = typeof theme; // theme is your object

declare module 'styled-components' {
  export interface DefaultTheme extends ThemeType {}
}

我希望这有帮助。 祝你好运