样式组件中的道具没有输入

Question

我使用的是react-native +打字稿+样式化组件（已安装所有@ types / *），但是道具在“组件”中仍然没有键入内容

有什么问题吗？

我希望道具是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重新创建项目后，问题消失了。

Answer 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 {}
}

问题仍然存在。我无法使用样式化的组件和打字稿为React-native实现主题。

Answer 2

只是扩大我的评论范围。您可以尝试将props接口传递给Button的样式对象，如

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;
`;