react-styleable

by pluralsight

pluralsight / react-styleable

React Component for portable styles

213 Stars 17 Forks Last release: over 4 years ago (v2.2.4) MIT License 88 Commits 14 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-styleable

Consistent, easy overrides for CSS Modules in React Components

Install

npm install react-styleable --save-dev

Usage

Styles in Props

react-styleable
makes your styles from your CSS modules available on
props.css
.

Write your stylesheet with all the perks of css modules. For example:

.list {
  list-style: none;
  padding-left: 0;
  margin: 10px;
}
.item {
  outline: 1px solid red;
  padding: 10px;
}

Then in your reusable component, wrap your React.Component in

react-styleable
's higher-order component.
import styleable from 'react-styleable'

import css from './my-list.css'

class MyList extends React.Component { renderItem(item, i) { return (

  • {item}
  • ) } renderList(items) { return items.map(this.renderItem) } render() { return (
      {this.renderList(this.props.items)}
    ) } }

    export default styleable(css)(MyList)

    Usage as a decorator is also nice:

    @styleable(css)
    class MyList extends React.Component { /* ... */ }
    

    Your

    MyList
    component is now styled and ready to display!

    Overriding Component Styles

    This is the big payoff.

    If you want to override this component's styles as the consumer, you can easily do so, through the same, consistent interface. First, define a new stylesheet:

    .item {
      outline: 1px solid blue;
    }
    

    And use it to render

    MyList
    again, passing your new stylesheet via the
    props.css
    prop:
    import MyList from './my-list'
    
    

    import css from './client.css'

    React.render(, document.getElementById('app'))

    Now the

    .item
    s outline will be blue instead of the original red.

    Composing Component Styles

    If instead of just overriding the styles, you wanted to add to them with style composition, you can do that as well.

    One method is via CSS modules'

    composes
    keyword. In your new stylesheet:

    .item {
      composes: item from "./my-list.css";
      background: pink;
    }
    

    Now the original red outline will remain and a pink background will be present as well. This is the most surefire way to compose styles because it allows you to guarantee the order of the cascade.

    But it has the downside of having to locate the original stylesheet location.

    If you have enough assurances on the cascade order and selector specificity, all potential concerns, you can use the

    compose
    api via the
    react-styleable
    to accomplish the same thing (in
    [email protected]
    ):
    import MyList from './my-list'
    
    

    import css from './client.css'

    React.render(, document.getElementById('app'))

    Styled. Portable. Easily overridden. So, so good.

    We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.