@deskpro/react-stylesheet

React Stylesheet

React Stylesheet is a way to style React components with... React components!

Motivation

Define a convention for styling composite React components which is agnostic to the underlying DOM element styling mechanism (CSS classes or inline styles, CSS in JS or traditional stylesheets).

Provide a minimal set of API primitives which adhere to the convention.

Installation

% npm install react-stylesheet

Usage

Components should define their appearance in terms of other components, they do so by acceping a stylesheet prop which is mapping from string keys to components.

import React from 'react'

class Button extends React.Component {

  static defaultProps = {
    stylesheet: {
      Root: 'button',
      Caption: 'div',
    }
  }

  render() {
    let {caption, stylesheet: {Root, Caption}} = this.props
    return (
      <Root>
        <Caption>{caption}</Caption>
      </Root>
    )
  }
}

Instead of using concrete DOM components, render() is defined in terms of components from this.props.stylesheet.

Now to derive a styled variant of a component React Stylesheet provides a single function style(Component, override):

import {style} from 'react-stylesheet'

let SuccessButton = style(Button, {
  Caption(props) {
    return <div {...props} className="ui-Button__caption" />
  }
})

As you can see, we defined an override for the original stylesheet which replaces <button /> and <div /> with versions of the components which attach some CSS class names.

Another option would be to use inline styles:

import {style} from 'react-stylesheet'

let SuccessButton = style(Button, {
  Caption(props) {
    return <div {...props} style={{color: 'white'}} />
  }
})

As you can see React Stylesheet is completely agnostic to the way you want to style DOM components.

Credits

React Stylesheet is free software created by Prometheus Research and is released under the MIT license.