Talking about inline styles is always hard and there are still a lot of unanswered questions, like: 'are you kidding me?'.
I'll try to give you the key to enter the magical world of #CSSinJS (or to stay away from it forever).
State - Explicit Modifiers - Support for pseudo elements and browser states - Support for media queries - Progressive Enhancement - Dead code elimination & Minification - Large teams / maintainability
imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; React.render(<div style={divStyle}>Hello World!</div>, mountNode);
Browser state styles to support :hover, :focus, and :active - Media queries - Automatic vendor prefixing - Keyframes animation helper - ES6 class and createClass support
styles are specified, e.g. onMouseEnter for :hover, wrapping existing handlers if necessary. If any of the handlers are triggered, e.g. by hovering, Radium calls setState to update a Radium-specific field on the components state object.
class names - You have to use styles object whenever constructing a className - Mixing CSS Modules and global CSS classes is cumbersome - Reference to an undefined CSS Module resolves to undefined without a warning