React.js Inline Styles

component.js

var React = require('react');

var myComponent = React.createClass({
  
  getInitialState: function() {
    return {
      hover: false
    };
  },
  
  render: function() {
    var styles = {
      container: {
        height: 100,
        width: '100%'
      },
      button: {
        backgroundColor: 'blue'
      }
    };
    
    if (this.state.hover) {
      styles.button.backgroundColor = 'darkBlue';
    }
    
    return (
      <div style={styles.container}>
        <button style={styles.button} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} >Click me</button>
      </div>
    );
  },
  
  onMouseOver: function() {
    this.setState({hover: true});
  },
  
  onMouseOut: function() {
    this.setState({hover: false});
  }
})