Trying out react-style

MyComponent.js

/**
 * @jsx React.DOM
 */

"use strict";

var React = require("react/addons");
var ReactStyle = require("react-style");

var MyComponent = React.createClass({
  css: ReactStyle(function () {
    return {
      backgroundColor: "green",
      "> b": {
        fontStyle: "italic"
      }
    };
  }),
  css__subcomponent: ReactStyle(function () {
    return {
      backgroundColor: "blue",
      color: "white"
    };
  }),

  render: function () {
    return(
      <div styles={this.css()}>
        This is a <b styles={this.css__subcomponent()}>Rad Component!!!</b>
      </div>
    );
  }
});

module.exports = MyComponent;

rendered_by_react.html

<div class="a" data-reactid=".0">
  <span data-reactid=".0.0">This is a </span>
  <b class="b" data-reactid=".0.1">Rad Component!!!</b>
</div>

styles.css

.a { background-color: green; }
.a > b { font-style: italic; }
.b { background-color: blue; color: white; }

I see that you are using a feature I didn't know we had - cascading (tnx css-builder!). Due to the problems that come with it, which is mostly caused by implicit behaviour, this will be disabled in the next version. Sorry for the inconvenience.

I am thinking of adding a form of cascading that is more explicit, and therefore easier to maintain. Something in the direction of:

foo: ReactStyle(function(){
   return {
     backgroundColor: 'white',
     text: {
       color: 'black'
     }
   }
})

<div styles={this.foo()}>
<div styles={this.foo().text}>
</div>
</div>