Design to Code

5 Ways to Handle CSS in React

In this blog, you will learn how to integrate CSS styles in your React app through different ways.
Cover image

The three main components of web development—HTML, CSS, and JavaScript—are the fundamental building blocks of web apps. The first is utilised 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.

    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.

  2. 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:

  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.

    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.

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

  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.

    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 comes in. is a plugin that can convert your Figma design to production ready front-end code with different styling options such as CSS, TailwindCSS, and CSS modules, as well as options to configure file naming.

You can also customise your design with popular UI libraries such as Material UI and Bootstrap.

If you want to learn more about how to convert your Figma design to React, React Native, HTML/CSS, Nextjs, Vue, and more, check out our docs.

Keep your loco mode on!
Stay updated on the latest Locofy announcements and product updates

© 2024, Locofy Pte Ltd. All Rights Reserved.