Как передать реквизит стилизованному компоненту в эмоциях? Использование TypeScript - PullRequest
Новая
       37

Как передать реквизит стилизованному компоненту в эмоциях? Использование TypeScript

2 голосов
/ 17 апреля 2019

Я использую эмоции в стиле: 

import styled from '@emotion/styled'

Я пытаюсь передать реквизит стилизованному компоненту, как указано в руководстве:

https://emotion.sh/docs/styled

По какой-то причине это не работает. Я также использую TypeScript. Я передаю реквизиты моему стилевому компоненту под названием StyleWrapper здесь: 

const ex: React.FunctionComponent<exProps> = props => {
  return (
    <StyleWrapper someNumber = {props.someNumber}
...
    </StyleWrapper >
  )
}

и в StyleWrapper: 

const ToolsHeaderColumn = styled.div`
  padding-top: ${props => props.someNumber };
`

Я получаю ошибку при компиляции: 

"Property 'someNumber ' does not exist on type 
'Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, 
HTMLDivElement>, "children" | "style" | "title" | 
"color" | "hidden" | "defaultChecked" | "defaultValue" |     "suppressContentEditableWarning" | ... 243 more ... 
| "css"> & { ...; }'.ts(2339)
"

1 Ответ

3 голосов
/ 17 апреля 2019

на https://github.com/emotion-js/emotion/blob/master/docs/typescript.md это документы, вы можете сделать это как: 

type ToolsHeaderProps = {
  someNumber: number
}

const ToolsHeaderColumn = styled('div')`
  padding-top: ${(props: ToolsHearderProps) => props.someNumber };
`

если вы используете машинопись 2.9+, вы можете использовать это: 

const ToolsHeaderColumn = styled.div<ToolsHearderProps>`
  padding-top: ${(props: ToolsHearderProps) => props.someNumber};
`
...