Cool glasses

Styling
React
Components

Decide How You'll Style Your React Project
Updated for 2020!

Inline Styles

Who said inline styles were a no-no? That's so 2010. A decade later, what is old is new, what was wrong is right. Will this work? Try it! You might be surprised.

styled-components icon

CSS-in-JS

Add a CSS-in-JS library to the mix, and you'll get extra styling capabilities inside JavaScript. These superpowers used to be available only inside your CSS stylesheets. A great option for colocating styles while getting most of what CSS gives you.

CSS Stylesheet

Want to stick to what you know? It totally works. You've got some pitfalls to navigate, but you can do it! Just throw a stylesheet up 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

Ever wondered which styling approach to take on your next project? There are so many options in the React world. What's the "right" way? There isn't one. But through this quick course, you'll be able to try out a few great methods and then have the context to make your own decision.

Learn how to accomplish the basic patterns of styling in each tech. And then prepare to setup your own CSS project config, if needed.

Course Materials

There are a some great examples that work through. We exercise static, dynamic and override styling in a real-world scenario. Grab the code. Follow along or take it to the next level!

Try Pluralsight

free for 10 days