How to use the reactcss.mixin function in reactcss

'use strict';

var React = require('react');
var ReactCSS = require('reactcss');

var Button = require('./Button.es5');

module.exports = React.createClass({

  // Include the ReactCSS.mixin as a mixin
  mixins: [ReactCSS.mixin],

  classes: function() {
    return {
      // This is our default dialog class
      'default': {
        dialog: {
          background: '#fff',
          boxShadow: '0 6px 20px rgba(0,0,0,.19), 0 8px 17px rgba(0,0,0,.2)',
          borderRadius: '2px',
          maxWidth: '400px',
        },
        body: {
          padding: '24px',
        },
        title: {
          fontSize: '20px',

'use strict';

var React = require('react');
var ReactCSS = require('reactcss');

module.exports = React.createClass({

  // Include the ReactCSS.mixin as a mixin
  mixins: [ReactCSS.mixin],

  getDefaultProps: function() {
    return {
      // Set a fallback backgound and color if one isnt specified
      background: '#4A90E2',
      color: 'rgba(255,255,255,.87)',
    };
  },

  classes: function() {
    return {
      // This is our default button class
      'default': {
        button: {
          background: this.props.background,
          display: 'inline-block',

import React from "react/addons";
import ReactCSS from "reactcss";

var Item = React.createClass({
    mixins : [React.addons.PureRenderMixin, ReactCSS.mixin],
    styles : function(){
        return this.css()
    },
    classes : function(){
        return {
          'default': {
            item: {
              "font-weight": 'bold'
            }
          }  
        };
    },
    render : function(){
        return <li is="">
            Item text : {this.props.text}
        </li>