jacob-ebey/styled-components-ts

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress and the added benefits of TypeScript 💅

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress and the added benefits of TypeScript 💅

npm install --save styled-components styled-components-ts

Getting Started

// Import react, styledComponents and styledComponentsTS
import * as React from 'react'
import styledComponents from 'styled-components'
import styledComponentsTS from 'styled-components-ts'

// Create an interface for the component
export interface MyImageProps {
  size: number
  borderColor?: string
  borderSize?: number
}

// Create a styled component with our props interface
const MyImage = styledComponentsTS<MyImageProps>(styledComponents.img) `
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  border: ${props => props.borderSize || '4px'} solid ${props => props.borderColor || 'black'}
`

export default MyImage

Now we have all the typescript goodies for MyImage like type checking and auto-complete.

import MyImage from './MyImage'

<MyImage size={300} borderColor="blue" borderSize={10} />

We can also extend our components and add new props with ease.

// Import react, styledComponents and styledComponentsTS
import * as React from 'react'
import styledComponents from 'styled-components'
import styledComponentsTS from 'styled-components-ts'

// Import our image and it's props
import MyImage, { MyImageProps } from './MyImage'

// Create an interface for the component that extends the base image props
export interface ExpandedImageProps extends MyImageProps {
  backgroundColor?: string
}

// Create a styled component with our props interface that extends MyImage
const ExpandedImage = styledComponentsTS<ExpandedImageProps>(MyImage.extend)`
  background-color: ${props => props.backgroundColor || 'unset'};
`

export default ExpandedImage

Using styled-components v4+?

If you're using a version of styled-components greater than 4.0.0 you do not need this library. See below for example usage:

const Button = styled.div<{ selected?: boolean }>`
  background: ${props => props.selected ? 'red' : 'blue'};
`

// or
interface IButton {
  selected?: boolean
}
const Button = styled.div<IButton>`
  background: ${props => props.selected ? 'red' : 'blue'};
`

For more information please see https://github.com/styled-components/styled-components

styled-components-ts's Issues

Setup CI

Seems there is a bit of interest here, so I'm going to setup CI in the next few days and start addressing some of the comments.

Thanks for your patience everyone, my attention has been elsewhere.

No exported member 'StyledComponentClass'

I get this error when using this package:

project/node_modules/styled-components-ts/lib/styled-components-ts.d.ts
(3,32): Module '"project/node_modules/@types/styled-components/index"' has no exported member 'StyledComponentClass'. Did you mean 'StyledComponentBase'?

Any idea?

    "styled-components": "^4.1.2",
    "styled-components-ts": "^0.0.15"

add support for the css helper from styled-components

NPM package >=0.0.9 is incomplete

When I load the NPM package of 0.0.8, it has the following in the node_modules folder:

LICENSE
README.md
dist
examples
node_modules
package.json
src
typings

Any version >=0.0.9 has the following in its folder:

LICENSE
README.md
node_modules
package.json
src

Argument of type * is not assignable to parameter of type 'ThemedStyledFunction<any, any, any>'

I don't suppose you've ever had to deal with React components from a third-party library that has its own types. I'm getting this error:

Argument of type 'typeof Spin' is not assignable to
parameter of type 'ThemedStyledFunction<any, any, any>'.
Property 'attrs' is missing in type 'typeof Spin'.

styled_components_ts___default(...) is not a function

hi.. i'm getting the following error..

__WEBPACK_IMPORTED_MODULE_1_styled_components_ts___default(...) is not a function

import styled from 'styled-components';
import styledProps from 'styled-components-ts';

interface FooStyledProps {
    bg : string;
}

const FooStyled = styledProps<FooStyledProps>( styled.div )`
    ul {
        li {
            background: ${ ( props ) => props.bg };
        }
    }
`;

export { FooStyled as default };

am i doing something wrong?

Dependency on React 16?

Does this truly depend on React 16? If not, you should list the earliest version that works so that projects don't unnecessarily depend on 16.

Add support for styled-components v4

Please add support for newest version of styled-components v4.

Use with styledComponents.withComponent

Is there a way to use this with Styled Component's withComponent method?

I've tried various takes but consistently get type mis-match errors.

import styledComponents from 'styled-components'
import styledComponentsTS from 'styled-components-ts';

interface ButtonProps {
  color: string
}

export const Button = styledComponentsTS<ButtonProps>(styledComponents.a)`
  border: none;
  background-color: ${props => props.color };
`

interface BorderedButtonProps extends ButtonProps {
  borderColor: string
}

export const BorderedButton = styledComponentsTS<BorderedButtonProps>(Button.extend)`
  border: 2px solid ${props => props.borderColor };
`

// Ideally output a link ("<a>")
export const ButtonLink = styledComponentsTS<ButtonProps>(Button.withComponent('a'))`
  border: 2px solid ${props => props.borderColor };
`