When it comes to question of how to style React components, the obvious answer is to just do it the same way we have for many years — CSS. Stylesheets are a fundamental building block of the web and there are probably not many (if any at all) websites that you visit which don't load at least one external stylesheet.
After doing a quick bit of searching, I discovered that there are already several alternatives to vanilla stylesheets that exist within the React ecosystem. In this post, I'll explain two different ways of working with styles in a React application. The first option being the most familiar; using .css files but in a slightly more modern way, where as the second option almost entirely drops stylesheets in favour of the style prop.
webpack's css-loader with CSS modules
The loader also introduces some additional functionality to CSS, including a composes rule which, as its name suggests, allows you to compose another selector's rules (similar to @extends in SCSS), for example:
You can then use these identifiers as values for the className prop (to conditionally combine multiple class names together you can use something like my own class-name module). One of the great things about css-loader is that because it still simply post-processes a stylesheet, you can use it in conjuction with other great webpack loaders such as precss.
Radium is an enhancer for React components. Wrapping a component with the Radium function supercharges the style prop. Radium does this by overloading the render function of the provided component, recursing in to the result of the original render and applying some juice to the style prop of each DOM-based element.
Radium enhances the style prop in a number of ways. The enhancement you'll use the most often is instead of only being able to provide an plain object as a value to the style prop, you can instead pass an array of style objects, which will be flattened together. This alone is a very handy feature for composing styles. Style objects can also include a number of CSS inspired properties (such as :hover) which Radium will automatically apply to your style object when in the correct state.
There are a number of CSS selectors which Radium does not support natively, such as :last-child, but in most cases you can add support for them yourself by simply using a conditional when constructing your array of styles. For example, to add custom styles to the last child in a mapped array of components you can just compare the index to the length of the array:
On the other hand, one of the big negatives of using the style prop rather than a stylesheet is that you lose a lot of great existing tooling - such as the aforementioned precss. The biggest time saver that you lose by using inline styles is most probably the autogeneration of browser vendor prefixes. Luckily, Radium has support for autoprefixing built in. It bundles inline-style-prefixer which takes care of adding only the browser vendor prefixes required to your styles.
If you do decide to use Radium for a project you most likely still won't be completely free from CSS. While you can style all of your React components with Radium if you want to, there will often be times when you need to style components which do not accept style props or DOM elements which are not controlled by React. For those situations, Radium provides a Style component which lets you provide rules scoped to fixed CSS selectors. For example: