🎊 Deprectated 🎊

The original issue this was intending to solve has been fixed and released in TypeScript 2.9.2. See typescript#11947 and styled-components#1428 for more information.

styled-with-props

A temporary solution to prop passing with TypeScript and styled-components.

---

😩  Current Solution

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

interface Props {
  background: 'white' | 'black'
  className?: string
}

const Card: React.SFC<Props> = props => (
  <div className={props.className}>
    {props.children}
  </div>
)

const StyledCard = styled(Card)`
  background-color: ${props => props.background};
`

😢  Desired Solution

import styled from 'styled-components'

interface Props {
  background: 'white' | 'black'
}

const Card = styled.div<Props>`
  background-color: ${props => props.background};
`

Unfortunately, this is not currently possible due to the fact that TypeScript does not support passing generics to tagged template literals. TypeScript#11947

😎  Temporary Solution

import styled from 'styled-components'
import withProps from 'styled-with-props'

interface Props {
  background: 'white' | 'black'
}

const div = withProps<Props>('div')

const Card = styled(div)`
  background-color: ${props => props.background};
`

Why?

This takes advantage of the existing syntax used with styled-components. This is very important for things like the Babel plugin, VSCode plugin, etc..