dynamic_styles_with_react_free_style.js

var Style = require('react-free-style').create()

var BUTTON_STYLE = Style.registerStyle({
  backgroundColor: 'red',
  padding: 10
})

var ButtonComponent = Style.component(React.createClass({

  // You must define `contextTypes` to access `freeStyle`.
  contextTypes: {
    freeStyle: React.PropTypes.object.isRequired
  },

  componentWillMount: function () {
    this.inlineStyle = this.context.freeStyle.registerStyle(this.props.style)
  },

  componentWillUnmount: function () {
    this.context.freeStyle.remove(this.inlineStyle)
  },

  render: function () {
    return (
      <button
        className={Style.join(this.inlineStyle.className, BUTTON_STYLE.className)}>
        {this.props.children}
      </button>
    )
  }

}))

var App = Style.component(React.createClass({

  render: function () {
    return (
      <div>
        <ButtonComponent style={{
          backgroundColor: this.props.bgColor,
        }}>
          Hello world!
        </ButtonComponent>

        <Style.Element />
      </div>
    )
  }

}))

React.render(<App bgColor={`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255}`} />, document.body)