如何在情感中将道具传递给风格化的组件？使用TypeScript

Question

我用的是情感风格：

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)
"

Answer 1

通过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};
`