Styling
React
Components

A comparison of CSS approaches in React

Inline Styles

In the traditional world of CSS, inline styles are a no-no. But in the new world of components in UIs, inline styles have some advantages. Christopher Chedeau gave his exposition on what problems inline styles solve. We cover that talk and what it means for us in this section. Demonstrated here is the most basic form of inline styles possible.

Radium

Radium provides a step up from vanilla inline styles. By using this library you get extra features available for use that you didn't have before. Radium is one of the pioneers in this enhanced inline styles space that has given rise to a string of similar libraries for CSS in JS.

External Stylesheet

If you're just getting into React and want to keep your CSS story as it has been traditionally, regular CSS in an external stylesheet will feel super familiar. This route will ensure you can use your tried and true styling strategies that you've developed over time. You'll also get a chance to play with some a new tool, Webpack, to get those styles on the page.

CSS Modules

Once you taste CSS modules, there will be no going back. In a surprisingly-simple, genius way, CSS modules allow you to separate and compartmentalize your CSS. This allows you to make isolated changes to styles without affecting the world. It's life changing.

The Course

This course takes a project-based approach in trying out several of the most popular and promising approaches to styling React components. We start with a small UI project that is fully implemented in React and discover how it feels to try out each one of these approaches to layer on some sweet styles.

You'll also get some great background on styling in web components. And there's a short, gentle introduction to how to handle the basics of CSS inside of Webpack.

Try Pluralsight

free for 10 days

Get new courses