Emotion: TypeScript example is broken in documentation

Created on 31 May 2018 · 2Comments · Source: emotion-js/emotion

When trying to run this typescript example from documentation, I get many typescript errors
https://emotion.sh/docs/typescript#passing-props-when-styling-a-react-component

emotion version: 9.1.3
react version: 16.4.0
typescript version: 2.8.3

What you did:
Tried to run this example

What happened:
Got many typescript errors

screen shot 2018-05-31 at 16 55 27

TypeScript

Source

smashercosmo

Most helpful comment

Ok, figured out the correct way

import * as React from 'react'
import styled from 'react-emotion'

type ComponentProps = {
  className?: string,
  label: string
}

type StyledComponentProps = {
  bgColor: string
}

const Component: React.SFC<ComponentProps> = ({ label, className }) => (
  <div className={className}>{label}</div>
)

const StyledComponent = styled<ComponentProps, StyledComponentProps>(Component)`
  color: red;
  background: ${props => props.bgColor};
`

const App = () => (
  <StyledComponent bgColor="red" label="Oh, needs to re-type label prop =(" />
)

smashercosmo on 31 May 2018

👍3

All 2 comments

Ok, figured out the correct way

import * as React from 'react'
import styled from 'react-emotion'

type ComponentProps = {
  className?: string,
  label: string
}

type StyledComponentProps = {
  bgColor: string
}

const Component: React.SFC<ComponentProps> = ({ label, className }) => (
  <div className={className}>{label}</div>
)

const StyledComponent = styled<ComponentProps, StyledComponentProps>(Component)`
  color: red;
  background: ${props => props.bgColor};
`

const App = () => (
  <StyledComponent bgColor="red" label="Oh, needs to re-type label prop =(" />
)

smashercosmo on 31 May 2018

👍3

Close this issue in favor of #679.