# styled-with-props

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

Latest version **0.0.4-deprecated** (published 2018-06-21) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install styled-with-props
pnpm add styled-with-props
yarn add styled-with-props
bun add styled-with-props
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.4-deprecated |
| Published | 2018-06-21 |
| First published | 2018-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | nickbreaton |
| Maintainers | nickbreaton |

## Links

- npm: https://www.npmjs.com/package/styled-with-props
- Repository: https://github.com/nickbreaton/styled-with-props
- npm.io page: https://npm.io/package/styled-with-props

## Recent versions

- 0.0.4-deprecated (latest) — 2018-06-21
- 0.0.4 — 2018-01-05
- 0.0.3 — 2018-01-05
- 0.0.2 — 2018-01-05
- 0.0.1 — 2018-01-05

## README

# :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](https://github.com/Microsoft/TypeScript/issues/11947) and [styled-components#1428](https://github.com/styled-components/styled-components/issues/1428) for more information.

<br>
<br>

## styled-with-props

A temporary solution to prop passing with [TypeScript](http://www.typescriptlang.org/) and [styled-components](https://www.styled-components.com/).

---

### :weary:&nbsp;&nbsp;Current Solution

```tsx
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:&nbsp;&nbsp;Desired Solution

```ts
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](https://github.com/Microsoft/TypeScript/issues/11947)

### :sunglasses:&nbsp;&nbsp;Temporary Solution

```ts
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](https://github.com/styled-components/babel-plugin-styled-components), [VSCode plugin](https://github.com/styled-components/vscode-styled-components), etc..

---
_Source: https://npm.io/package/styled-with-props · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._