Стилизованная тема с типизацией (Typescript) - PullRequest
Новая
       22

Стилизованная тема с типизацией (Typescript)

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

Я использую styled-components в сочетании с styled-theming в моем реактивном проекте, предварительно настроенном на TypeScript.

У меня проблема с экспортированной функцией theme из библиотеки styled-theming. Он не распознает переданные реквизиты функции. Позвольте мне показать, что я имею в виду ...

Во-первых, это часть моего package.json файла 

"styled-components": "^5.0.1",
"styled-theming": "^2.2.0"

"@types/styled-components": "^4.4.3",
"@types/styled-theming": "^2.2.2",

"typescript": "^3.7.5"

Во-вторых, это мой component.styles.ts файл

enter image description here

Как вы можете видеть на рисунке ниже, props из styled-components в порядке.

enter image description here

Но они не используются внутри theme Функция

enter image description here

Есть ли идеи о том, как решить проблему ? Я ожидаю, что в моей функции theme будут правильные наборы.

1 Ответ

0 голосов
/ 20 марта 2020

Я не уверен, как выглядит ваша подпись функции theme, но вы можете столкнуться с этим предупреждением , где вам нужно явно установить тему в качестве аргумента интерфейса. Вы можете попробовать импортировать объект темы из styled-components и создать новую функцию - 

import {DefaultTheme} from 'styled-components'

interface ThemeProps {
   theme: DefaultTheme
}

function setTextColor(props: ThemeProps){
   return theme('mode', {...implementation_here...})
}

export const TextStyled = styled.Text`
  color: ${props => setTextColor(props)}
`
...