React CSS (assumes browserify)

1 App.js

/** @jsx React.DOM */
var React  = require('react'),
    Toggle = require('./components/Toggle');

var App = React.createClass({

  toggleChanged: function(newState) {
    alert('toggle changed to ' + (newState ? 'on' : 'off'));
  },

  render: function() {
    return (
      <div>
        <Toggle initAsOn={false} onChange={this.toggleChanged} />
      </div>
    );
  }
});

React.render(<App/>, document.getElementById('appContainer'));

2 Toggle.js

/** @jsx React.DOM */
var React     = require('react'),
    extend    = require('lodash.assign'),
    Styleable = require('../mixins/styleable.js');


module.exports = React.createClass(

  extend( Styleable, {

    propTypes: {
      initAsOn: React.PropTypes.bool,
      onChange: React.PropTypes.func
    },

    getDefaultProps: function() {
      return {
        initAsOn: false,
        onChange: function() {}
      };
    },

    getInitialState: function() {
      return { on: this.props.initAsOn };
    },

    doToggle: function(e) {
      var on = e.target.dataset.state === 'on';
      if (on !== this.state.on) this.props.onChange(on);
      this.setState({on: on});
    },

    render: function() {
      var s  = this.mergeStyles,
          st = this.state;

      return (
        <ul style={s('container')}>
          <li
            style={s('button', st.on && 'active')}
            data-state='on'
            onClick={this.doToggle}>On</li>
          <li
            style={s('button', !st.on && 'active')}
            data-state='off'
            onClick={this.doToggle}>Off</li>
        </ul>
      );
    },

    getStyles: function() {
      return {
        container: {
          padding: 10,
          backgroundColor: 'red',
          listStyle: 'none',
          width: 100
        },
        button: {
          backgroundColor: 'white',
          color: 'green',
          display: 'inline-block',
          padding: 10,
          width: 30
        },
        active: {
          backgroundColor: 'green',
          color: 'white'
        }
      };
    }
  })
);

3 Styleable.js

var extend = require('lodash.assign');

module.exports = {
  mergeStyles: function() {
    var results = {},
        styles  = this.getStyles();

    [].slice.call(arguments).forEach(function(arg) {
      if (!arg) return;
      if (!styles || !styles[arg]) return;
      results = extend(results, styles[arg]);
    });
    return results;
  }
};