styled-component 组件中的 props 没有类型

Posted 2023-03-13

【中文标题】styled-component 组件中的 props 没有类型

【英文标题】：Props in styled-component component have no typing

【发布时间】：2020-05-17 15:42:01

【问题描述】：

我正在使用 react-native + typescript + styled-component（安装了所有 @types/*），但 props 仍然没有在“组件”内输入

有什么问题？

我希望道具是props: MainThemeInterface 或props: mode: string 。

// button.component.ts
import  FC  from 'react';
import styled from 'styled-components/native';

interface ButtonComponentProps 
  title: string;
  onPress: (event: GestureResponderEvent) => void;


const Button = styled.TouchableOpacity`
  border-radius: 5px;
  padding: 11px 16px;
  background: $props => props;
  align-self: flex-start;
`;

export const ButtonComponent: FC<ButtonComponentProps> = props => (
  <Button onPress=props.onPress>props.title</Button>
);

// styled.d.ts file
import 'styled-components/native';
import  MainThemeInterface  from './theme.model';

// and extend them!
declare module 'styled-components' 
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface DefaultTheme extends MainThemeInterface 

// theme.model.ts file
export MainThemeInterface 
   mode: string;

更新

我降级到"styled-components": "^3.4.9" 并且打字开始工作。版本^5.0.0似乎存在问题。

更新 2

问题在于项目设置。使用expo cli 重新创建项目后，问题消失了。

【问题讨论】：

你有没有试过将 props 接口传递给 Button 的 style 对象？ const Button = styled.TouchableOpacity<ButtonComponentProps>

@Emma 是的，但它无论如何都不起作用

你能用你的代码发布一个小提琴或codesandbox.io吗？

【参考方案1】：

我也有同样的问题。尝试替换

declare module 'styled-components' 
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface DefaultTheme extends MainThemeInterface 

由

declare module 'styled-components/native' 
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface DefaultTheme extends MainThemeInterface 

问题仍然存在。我无法使用 styled-components 和 typescript 为 react-native 实现主题。

【参考方案2】：

只是为了扩展我的评论..您可以尝试像这样将道具接口传递给按钮的样式对象

const Button = styled.TouchableOpacity<ButtonComponentProps>`
  border-radius: 5px;
  padding: 11px 16px;
  background: $props => props;
  align-self: flex-start;
`;

或者

const Button = styled.TouchableOpacity< mode: string >`
  border-radius: 5px;
  padding: 11px 16px;
  background: $props => props;
  align-self: flex-start;
`;