Sorry for asking this here, but I'm trying wrap my head around React.
With the fact that we want to isolate styles for each component, how do we go about theming the components later on?
I suggest you to read this (http://stackoverflow.com/a/31638988/2304450) very good stack overflow answer, you'll find some interesting introduction to inline styles if that's what you were looking for.
A different approach could be to pass a `classScope` string props down to the components, and each component then applies it to the classes it uses (Example: return (<div className={this.props.classScope + "inner-div"}></div>); ). This way we could achieve better css selector scoping, at a cost of a slightly more verbose code when using a component.
If you are using something like browserify you could create a module that defines the variables you want to use for theming or something and then import that module to achieve change once/ show everywhere.
You could also just not do inline styles, it isn't required.
A different approach could be to pass a `classScope` string props down to the components, and each component then applies it to the classes it uses (Example: return (<div className={this.props.classScope + "inner-div"}></div>); ). This way we could achieve better css selector scoping, at a cost of a slightly more verbose code when using a component.