4 Different Ways to Style Components in React

Brian Francis
JavaScript in Plain English
4 min readApr 11, 2021

--

React is very open in how you can approach styling it. I am gonna hit on what I believe to be the most popular approaches to styling in React.

There are so many different ways to Style things in React, and although they are all very different, they are still quite similar. Similar in the way that CSS is what drives all of them. If you know CSS, you can use whichever one your heart desires to great effect.

1. Regular CSS

This is the tried and true method that has been used what seems like the entire life of the internet. Many people think that you immediately grab one of the below solutions that I will be talking about, but that isn’t always the case. If handled with care, regular CSS can be just the solution you need.

2. CSS Modules

Similar to regular old CSS, CSS Modules have identical syntax. The difference is in how it is implemented. CSS Modules will essentially generate a unique class name that is going to be used in the HTML. The problem that CSS Modules attempt to solve is naming conflicts and scoping in components.

Here’s what I mean. Let’s say, for example, that you have a CSS file (let’s call it css-file-1.css), and inside that file, you have a class name (let’s call it my-class). This is great, and we’re not going to see any problems unless we make another CSS file. Let’s call this file css-file-2.css, and inside this file, we will create a class with an identical name. The problem is that in regular CSS, you’re not going to get the desired result. Because of CSS's global nature, it is a bad idea to try to have classes with the same names. However, thanks to how CSS Modules work, even though the CSS files may have the same class name, the class name generated and used by the browser is completely different.

Below are some links explaining how to use CSS Modules in different popular React frameworks.

3. SCSS

SCSS is what is known as a CSS Preprocessor, meaning it will compile and build out SCSS files and turn them into CSS files before runtime. Here’s the best part about SCSS. If you know how to write CSS, then you know how to write SCSS. SCSS is a superset of CSS, meaning that it has the same syntax but with its own additional syntax.

Below is a link to the documentation for SCSS. You will notice that the docs call it SASS, but no need to worry because SCSS is just a newer, more acceptable CSS syntax. The feature-set remains the same.

Most React frameworks make it incredibly easy to get up and running with SCSS as well. Here’s are some links explaining how to implement it in different popular React frameworks.

The other nice thing about using SCSS is they will also be made to work in the same way that CSS Modules do. This is explained in more detail in the above links.

4. CSS-in-JS

Styled-Components is what is known as a CSS-In-JS library. That sounds scary, but really all it means is that you are writing your styles in JavaScript in a roundabout way. Styled-Components are my go-to solution when it comes to styling React components. In my opinion, it is the best of both worlds. It leverages the abilities that exist within CSS Modules and combines that with an SCSS like syntax. You are also getting the added benefit of writing highly dynamic styles because of the ability to tap into JavaScript (this can be a good thing or a bad thing, depending on how it is handled).

Setting up Styled-Components in different React frameworks can vary in difficulty depending on which one you are using.

When using it with Create-React-App or any other regular module-bundler, it is as easy as installing it in your project.

npm install styled-components

or

yarn add styled-components

In Gatsby, you can refer to this link in their docs for how to set it up.

And finally, in Next, you can refer to this link for how to set it up.

Conclusion

Hopefully, after reading this and seeing some of the different ways to style React components, this will give you ideas for your next project. If you think I missed any or would like to share your favorite way to style things in React, I would love to hear your thoughts.

More content at plainenglish.io

--

--