React Stylist

Style Sheet Component for React.

Demo & Examples

Live demo: yuanyan.github.io/react-stylist

To build the examples locally, run:

npm install
gulp dev

Then open localhost:9999 in a browser.

Installation

The easiest way to use react-stylist is to install it from NPM and include it in your own React build process (using Browserify, etc).

You can also use the standalone build by including dist/react-stylist.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

npm install react-stylist --save

Usage

var Stylist = require('react-stylist');
var Example = React.createClass({
    styles: {
        '.btn': {
          display: 'inline-block',
          color: '#000',
          padding: '6px 12px',
          marginBottom: '0',
          fontSize: '14px',
          fontWeight: 'normal',
          lineHeight: '1.428571429',
          textAlign: 'center',
          whiteSpace: 'nowrap',
          verticalAlign: 'middle',
          cursor: 'pointer',
          backgroundImage: 'none',
          border: '1px solid transparent',
          borderRadius: '4px',
          userSelect: 'none',

          ':hover': {
            color: '#fff'
          },
          // Try resizing the window!
          '@media (max-width: 500px)': {
            backgroundColor: '#5bc0de',
            borderColor: '#46b8da'
          }
        }
    },
    render: function() {
        return (
          <div>
            <Stylist styles={this.styles} />
            <button className="btn">Click Me</button>
          </div>
        );
    }
});

Properties

• styles: Your style sheets.