Реквизиты в компоненте styled-компонента не имеют набора текста - PullRequest
Новая
       25

Реквизиты в компоненте styled-компонента не имеют набора текста

1 голос
/ 01 февраля 2020

Я использую реагирующий-родной + typecript + styled-component (со всеми установленными @ 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;
}

enter image description here enter image description here

ОБНОВЛЕНИЕ

Я понижен до "styled-components": "^3.4.9", и набор текста начинает работать. Похоже, что проблема существует в версии ^5.0.0.

ОБНОВЛЕНИЕ 2

Проблема была внутри настройки проекта. После повторного создания проекта с expo cli проблема исчезла.

Ответы [ 2 ]

1 голос
/ 06 февраля 2020

У меня такая же проблема. Пытался заменить 

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

Проблема не устранена. У меня не было возможности реализовать Theming для реактивной настройки с использованием styled-components и typcript.

0 голосов
/ 03 февраля 2020

Просто, чтобы расширить мой комментарий. Вы можете попробовать передать интерфейс реквизита объекту стиля 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;
`;
...