reactjs - 如何将 Prop 传递给情感中的样式组件？使用 typescript

Question

我在以下位置使用情感风格:

import styled from '@emotion/styled'

我正在尝试将 Prop 传递给指南中提到的样式化组件:

https://emotion.sh/docs/styled

由于某些原因，它不起作用。我也使用 TypeScript。我在这里将 Prop 传递给名为 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

来自this docs ，你可以这样写:

type ToolsHeaderProps = {
  someNumber: number
}

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

如果你使用的是 typescript 2.9+，你可以使用这个:

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