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).
Badmouthing CSS has the unfortunate side effect of driving entire communities away from React. Part of me wonders if this is on purpose. - Mark Dalgleish
Inline Styles are the Future - Modularization - Computation & State - Explicit Modifiers - Support for pseudo elements and browser states - Support for media queries - Progressive Enhancement - Dead code elimination & Minification - Large teams / maintainability
React Inline Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the `className` prop of React elements. martinandert/react-inline
Radium Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS. FormidableLabs/radium
Features - Conceptually simple extension of normal inline styles - Browser state styles to support :hover, :focus, and :active - Media queries - Automatic vendor prefixing - Keyframes animation helper - ES6 class and createClass support
How does Radium work? Add handlers to props if interactive 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.
CSS Modules disadvantages - You have to use camelCase CSS 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
Inline Styles for designers - Keys are the camelCased version of the style names - Values are strings - Commas instead of semicolons - Vendor prefixes (other than ms) begin with a capital letter