0.0.4-deprecated • Published 6 years ago
styled-with-props v0.0.4-deprecated
:confetti_ball: Deprectated :confetti_ball:
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.
:weary: 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};
`
:cry: 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
:sunglasses: 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..