styledProperty

styled-components helper that generates a set of styles and sets the auto-generated className for them as property on a wrapped component.

Installation

npm install styled-property

Usage

import styledProperty from 'styled-property'
// auto-generates a class selector for the given css and sets it
// as "propName" property on the WrappedComponent.
const Component = styledProperty(WrappedComponent, 'propName')`
  display: block;
`

Use Cases

Set default and active styles of Link component from react-router.

import { Link } from 'react-router'
import styled from 'styled-components'
import styledProperty from 'styled-property'
 
// create basic Link styles
const BaseLink = styled(Link)`
  color: #aaa;
  display: inline-block;
  text-decoration: none;
`
 
// create an additional set of style rules and set the "activeClassName
// property of the wrapped component (BaseLink) to the auto-generated
// className for those styles.
const StyledLink = styledProperty(BaseLink, 'activeClassName')`
  color: #bada55;
`