react component styles

react-component-styles.html

<!-- react code -->
<script type="text/jsx">
/**
 * @jsx React.DOM
 */
var Example = React.createClass({
	style: `
	  view {
		width: 100px;
		height: 100px;
		background: black;
		border: 1px solid black;
 
		:::greater-than-half {
		  background: white;
		}
	  }
 
	  .nested {
		width: 50px;
		height: 50px;
		background: black;
		border: 1px solid black;
 
		:hover {
		  background: white;
		}
	  }
	`,
 
	render: function() {
		var classes = React.addons.classSet({
			':::greater-than-half': this.props.random > .5
		});
 
		return <div className={classes}>
			<div className="nested"></div>
		</div>;
	}
});
</script>
 
<!-- auto generated css -->
<style>
.react-view.react-example.react-example-state-greater-than-half {background:white;}
.react-view.react-example {width:100px;height:100px;background:black;border:1px solid black;}
.react-view.react-example .react-example-nested:hover {background:white;}
.react-view.react-example .react-example-nested {width:50px;height:50px;background:black;border:1px solid black;}
</style>
 
<!-- post rendered html -->
<div class="react-view react-example" data-reactid=".0">
	<div class="react-example-nested" data-reactid=".0.0"></div>
</div>