5 Different Ways to Handle CSS in React

The three main components of web development-HTML, CSS, and JavaScript-are the fundamental building blocks of web apps. The first is utilized for adding content, the second for styling, and the third for logic.

Initially, it was simple enough to integrate HTML with CSS using inline, internal, or external CSS. But when the Facebook team released React, a hybrid of HTML and JS, JSX was born & this led to new ways to combine JSX with CSS.

React is, in fact, the front-end development library of choice for the majority of developers worldwide, and many developers find it difficult to combine CSS with React.

And that’s where this blog will help you as we’ll cover different methods for using CSS in React.

Let’s get started.

1. 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.

.container{
   margin: 10px;
}

And then import it inside your React file.

import { React } from "React";
import "./style.css";
function App() {
  return (
    <div className="container">
      <h1>Hello</h1>
    </div>
  );
}
export default App;

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

2. Inline CSS in a React file

You may even utilize 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:

<div className="container" style={{margin: 10px}}>
  <h1>Hello</h1>
</div>

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

import { React } from "React";
function App() {
  const style = {
    container: {
      margin: "10px",
    },
  };
  return (
    <div className="container" style={style.container}>
      <h1>Hello</h1>
    </div>
  );
}
export default App;

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

And then it can be accessed like this:

<div className="container" style={style.container}>
      <h1>Hello</h1>
</div>

3. 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.

.container {
     margin: 10px;
}
 .btn {
     color: white;
     padding: 10px 20px;
     cursor: pointer;
     border: none;
}

And import it inside your App.js file.

import HomeCSS from "./Home.module.css";

export default function App() {
 return (

   <div className={HomeCSS.container}>
     <h1>Hello </h1>
     <button className={HomeCSS.btn}>Click Me!</button>
   </div>
 );
}

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.

4. Styled-Components

JSX allows you to utilize 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 the 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.

npm install styled-components

And then you can use it inside your React app.

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Container = styled.section`
  margin: 10px;
`;

render(
  <Container>
    <Title>
      Hello World!
    </Title>
  </Container>
);

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

5. 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.

function App() {
  return (
    <div className="m-2.5">
      <h1>Hello</h1>
    </div>
  );
}
export default App;

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.

Which CSS Approach Should You Use?

Here, we looked at various methods for incorporating CSS into our React project. And you may ask which is the best for you.

On one hand, inline CSS and styled-components are best for projects that can include CSS in their JavaScript files without bloating it, and on the other, using a traditional CSS file or CSS modules(for scoped styles) are the best options for files with complex designs that belong in a dedicated file for easy management and editing.

However, if you want to ship faster with a proper design system at your disposal, TailwindCSS can be your cup of tea.

Regardless of the way you choose to handle CSS in React, designing a pixel-perfect design from scratch can take a lot of weeks. This is where Locofy.ai comes in.

Locofy.ai is a plugin that can convert your designs in Figma or Adobe XD to production-ready React code with different styling options such as CSS, TailwindCSS, and CSS modules, as well as options to configure file naming.

You can even export your designs in Next.js and Gatsby as well as customize your design with popular UI libraries such as Material UI and Bootstrap. This enables you to rapidly export your code in different configurations and see what works best for your team.

Hope you like it.

That’s it — thanks.