How to pass props to a styled component in emotion? Using TypeScript

Question

I am using styled by emotion at:

import styled from '@emotion/styled'

I am trying to pass props to a styled component like the guide mentions:

https://emotion.sh/docs/styled

It doesn't work for some reason. I use TypeScript as well. I pass props to my styled component called StyleWrapper here:

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

and in StyleWrapper:

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

What I get is an error in compilation:

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

Subgroup

Answer 1

by this docs, you can make it like:

type ToolsHeaderProps = {
  someNumber: number
}

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

if you're using typescript 2.9+, you can use this:

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

Caprine

I editted the typescript 2.9+ version to account for the fact that specifying the props type is unnecessary. That's inferred from the generic parameter – Lotus