5 Ways to Handle CSS in React

Create and import a CSS file

The easiest way to include CSS inside your React project is by creating a CSS file and importing it to the React file.

This is similar to how you would use an external CSS file inside HTML files.

The process looks like this:

1. First, you have to create a CSS file, for example, style.css, and write your styling
2. Import it inside your React file

For example: 

Create a style.css file and write the content.

And then import it inside your React file.

By doing so, you made a style.css file and added the styles properties to it. Later, you can utilise the CSS file within your preferred React file.

Inline CSS in a React file

You may even utilise CSS style within your React file, similar to how you used inline CSS within the HTML file. This is great for writing simple style properties without having to create & maintain an entire file. 

You can write this style as an object and pass it to the ‘style’ prop of an element. It is worth noting that all the property keys will have to be converted to camel case, i.e “margin-top” will become “marginTop” and so on.

For example, you can simply add a margin to our div element as follows:

CSS styles may even be created using objects as shown in the example below:

In this example, you have a style object with some styles added.

And then it can be accessed like this:

Using CSS Modules

According to the official GitHub repo, a CSS Module is a CSS file in which all class names and animation names are scoped locally by default. In simple terms, you can apply styles to each of your components individually without affecting the functionality of any other components.

Consider that you defined buttons inside of two components with different CSS properties present in different React files.

And if you have a global CSS file, then the same designs will be applied to both buttons. It can be really intimidating & that's where you can use CSS modules while building a website.

For that, you must create a style.module.css file and import it into the relevant React file. So your specific styles will get added only where you want.

For example:

Create a file Home.module.css inside your "src" directory.

And import it inside your App.js file.

In this example, Home.module.css as HomeCSS is imported and assigned the CSS properties as  {HomeCSS.container}.

Note that, there are different ways we can add CSS modules inside our React app, it is one of the easiest ways.

Styled-Components

JSX allows you to utilise HTML and JavaScript together, but what about CSS? You may use Styled Components to your advantage here.

Simply said, Styled Components is a third-party library that lets you design reusable custom HTML components with predefined CSS properties and use them anywhere you choose inside your project.

A new feature called template literal introduced in ES6 version forms the cornerstone of this library, allowing you to create custom string interpolation rules. This template literal, along with CSS, can be used to create Styled Components.

Since it is an npm package, you have to first install it inside your React app.

And then you can use it inside your React app.

As you can see, there are two custom tags "Container" and "Title" and specified the CSS properties for each one of them.  

TailwindCSS

TailwindCSS is another popular option to include CSS in your React project.

It is a utility-first CSS framework for rapidly building custom user interfaces. Here you can easily build modern websites without ever leaving your HTML.

For example, you can use “m-2.5” to add a margin of 10px across the top, bottom, right, and left. In the same way, you can use “p-2.5” to add padding of 10px to every direction.

Since TailwindCSS provides utility-first CSS classes, you won’t be working with CSS directly but instead interacting with the predefined Tailwind classes. To reduce bundle sizes, it purges unused classes so you only ship the CSS you need.