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.
A temporary solution to prop passing with TypeScript and styled-components.
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};
`
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
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};
`
This takes advantage of the existing syntax used with styled-components. This is very important for things like the Babel plugin, VSCode plugin, etc..