10 Ways to Style a React Application

React is a library for rendering UI, it doesn’t care about styling. It is a nice thing about React, but it also leaves us alone in a big ocean with a lot of options.

Usually, choosing the style system for your React application is not as hard as it seems. Also, you don’t have to use all the 10 ways listed in the article.

It is good to know the all available options, so you can choose the best based on the situation.

1. Inline Style
2. Style Sheets
3. CSS Module
4. CSS Pre-Processor
5. Styled Components
6. React JSS
7. Radium
8. JSX Styles
9. React Shadow
10. Utility CSS Frameworks

1. Inline

Inline CSS are the same as like regular style tag.

2. Style Sheets

Stylesheets are very common in the react eco-system and it is cool. The only problem is isolating the styles from another component is pretty hard.

We create regular stylesheets and import them on your components

.container{
  width: 100%;
  padding: 12px;
  background: red;
}

By default, the Create-React-App did some steps to make it production-ready by using PostCSS.

3. CSS Modules

CSS module solves the style isolating issue by creating a unique class name for every class.

Create-React-App has inbuild support for the CSS Modules. CSS Module allows us to use the same class name with files without worrying about the CSS name clash.

For example, we have the same class container on two different files

// homepage.module.css
.container{
  padding:12px;
  background:red;
}

If we have the same class name in another file.

// contactpage.module.css
.container{
  padding: 12px;
  background:green;
}

4. CSS Pre-Processor

We can use SASS , SCSS , LESS , STYLUS , etc by using webpack loader. But unfortunately, none of them is supported by default in the CRA.

We can use SCSS or SASS by installing node-sass

npm i node-sass

For more, please check out the official docs.

5. Styled Components

Instead of writing CSS as JS, the styled-component is allowing us to write the actual CSS.

Install the styled component via npm

npm i styled-components

Let us create the same style using styled-componets

Styled-Component uses the Tagged Template Literals to create the styles.

6. React JSS

JSS is allowed to create CSS by using Javascript in a declarative, conflict-free and reusable way.

Install the react-jss using npm

npm i react-jss

Then create the style using createUseStyles

7. Radium

Radium is a set of tools to create inline styles using javascript. The Radium did some tree-shaking to eliminate dead code.

By default, react doesn’t allow inline style with pseudo selectors like :hover ,:focus, etc.

Install the radium using npm

npm i radium

8. React Shadow

React Shadow allows us to create the Shadow DOM in React with all the benefits of style encapsulation.

Install the using Reach Shadow using npm

npm i react-shadow

9. JSX Style

jsxstyle is an inline style system for React and Preact. It provides a best-in-class developer experience without sacrificing performance.

Install the jsxstyle using npm

10. Utility Frameworks

Utility frameworks are created to avoid creating a style sheet. The most famous utility framework is tailwindcss

CRA is doesn’t support tailwindcss natively, we need to use some CRA override like CRACO.

For more info, please check out official docs

Hope you enjoy this article.

Happy reading ❤️.

More content at plainenglish.io