Debajyati Dey

Posted on Oct 16 • Originally published at devsunite.com

The Different ways to Style Your React App

#react #javascript #css #webdev

As a Web Developer, if you use React, you have a wide number of options available for styling websites.

In this brief article, we are going to dive into the different ways you can style a React App/Site, so that you can pick up the best option depending on your situation and requirement.

Now you might be thinking, why know all the different ways? Why just not learn 1 technique, learn it great enough and apply it everywhere else? This is a natural question that may come up in your mind, and it is okay.

Look, the thing is you might not be always working on a project alone, you might have to work on a site that has been developed from years ago, picking different paradigms over time, and also has all the code using a different way to style the site than you are used to. In that case, if you have never used that method before, jumping straight into writing code will not be possible and you may even spend too much time just learning the technique before getting to code, because you are not even familiar and have never used/seen that way of styling before.

In this era of High-Level AI Code Generators and Vibe Coding, strengthening the fundamentals and having the deeper level understanding of concepts, patterns and techniques is the key to write, manage and integrate maintainable code. That's why, if you know React or are learning React at this time, it is recommended that you learn, get familiarised and be comfortable with all the different kinds of styling paradigms usually seen in the React Ecosystem.

So, without spending more time, let's begin!

Overview

In this article, we will discuss the widely used ways, which are -

Inline Styling,
Stylesheet objects (AKA the RN Stylesheet method),
Using Styled Components,
CSS files,
CSS modules,
CSS frameworks,

Feels like you are now getting excited! I am too! So, let's start with inline styling!

Techniques

1. Inline Styling:

If you have used plain html-css-javascript before, you must be already familiar with inline styling in HTML. Inline is styling in React is not much different than that.

It is a nice and easy method of styling React Apps when -

You are good with applying simple & small number of styles to your components,
Your components don't require high amount of complex nested styling (that would make the code unreadable if inline styling is used) to both parent and child elements.

How does it look like?

export default function AktaComponent({ children }) {
    return (
    <div>
      <h1 style= {{ fontFamily: "JetBrains Mono", color: "cyan" }}>
        Hello,
        <br />
      </h1>
      <h2 style={{ fontFamily: "JetBrains Mono", color: "cyan" }}>
        I am the seer, who sees everything!
      </h2>
      {children}
    </div>);
}

Here you can clearly recognise that the inline styles are not using CSS properties (in kebab-case) directly but JavaScript object key value pairs (in camel-case). They are actual CSS properties mapped to the properties of a JS object var defined in the React library with the type of React.CSSProperties.

Look, here in the code, we are using two curly braces to inject the CSS properties as a JS object in the JSX code.

At first, it might seem daunting and confusing; don't worry, we have been there. Let me explain -

The first curly braces are used to insert the JavaScript style object in the JSX code.
Then the inner curly brackets create an object literal. The styles are then passed as object literals to the element.

Well, you might not have noticed that we are passing all the properties separated by comma, not semicolons. Again, because they are JS object literals, not raw CSS props. This is a thing you should keep in mind, or you will fall in the labyrinth of syntax errors.

Well, as I previously said before, this is only good if you don't have to keep a lot of styles in your components.

If you have, then the components will no longer look elegant and will eventually become a mess, which you'll likely want to avoid.

So, this is the caveat? Okay, so what then if I have a lot of styles put in components inline, and want to refactor my code to improve readability and maintainability?

Yes, that's where our next candidate comes in.

2. Stylesheet Objects

If you are familiar to React Native, you have already used Stylesheets (a utility provided by the React Native library to create style objects that are compatible with the mobile devices) to style your apps.

Well, in react we don't have such Stylesheet import available originally, simply because we don't need it. You can directly define a style object and pass it as a value to the style prop.

Didn't understand anything? Let me show you the code -

const Form = ({ h2, formComponent }) => (
    <div style={Container}>
      <h2 style={Header}>{h2}</h2>
      <div style={FormContainer}>
        { formComponent }
      </div>
);
const Container = { display: "flex", flexDirection: "column" };
const Header = { padding: "10px 20px", textAlign: "center", color: "white" };
const FormContainer = { display: "flex", justifyContent: "center", alignItems: "center"};

This is how you can refactor your existing code which uses inline styling in React into something that is easier to understand and easier to reason about. The named variables are the best part of this method, which makes it better than inline styling. And that's why you don't always have to keep in mind the double curly braces, as supposed to in case of inline styling.

The great strength of this method that truly sets it apart is - you can now encapsulate all the named style objects into one 'styles' (or whatever name you prefer) object, and use it as a module, shared between multiple files.

And that's how you follow the DRY (Do not Repeat Yourself) policy of Software Engineering Best Practices. You are utilizing reusability, which is what we expect from a developer who knows what he/she is doing.

But still, something is missing with these 2 approaches.

Didn't get it? The thing is, - with these React.CSSProperties JS objects, we aren't really able to use pseudo selectors like hover modules, focus modules; not even media queries -- directly within our JSX.

So, what's the solution?

Yes, that's where our next methods come in.

3. Styled Components

Styled-components is a popular CSS-in-JS library that drastically improves the DX for the modern frontend dev while providing a near-perfect UX, with component-scoped CSS.

Why Use Styled Components???

Strong typing,
Proper scoped CSS, tied to components, making them reusable and modular.
Automatically adds vendor prefixes to your code (styles) to ensure compatibility with different browsers — especially older ones that may not fully support modern CSS standards.
Allow collocating styles with component logic for better organization.
Support advanced features like theming, animations, and dynamic styling via props.
Prevent global CSS leaks by generating unique class names.
Supports concurrent server-side rendering, with stylesheet rehydration. This doesn't interfere with global styles, such as keyframes or createGlobalStyle and allows you to use styled-components with React DOM's various SSR APIs.

To use styled components, you first need to install the necessary dependencies -

npm install styled-components
npm install -D babel-plugin-styled-components

with this import directive in the top of your file - import styled from 'styled-components';

You can start using styled components right away. Here's how you do it -

import styled from 'styled-components';
const Container = styled.div`
display: flex;
flex-direction: column;
`;

const Header = styled.h2`
padding: 10px 20px;
text-align: center;
color: white;
`;

const FormContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
`;

See! You are now writing pure CSS properties, not just plain silly JS style objects! This approach allows for nesting, media queries, and pseudo-selectors—things that are tricky with plain JS style objects.

But like every other technology, styled component is no all good for everything. It has its own caveats, which you should be aware of as a skilled React Developer.

Caveats of Styled-Components

Performance Overhead: styled-components can be slower in runtime performance, especially in large applications, due to its reliance on tagged template literals and runtime style injection.
Bundle Size: It tends to have a larger bundle size compared to Emotion, which can impact load times.

Well, if you are interested in the CSS-in-JS way of styling, don't be disappointed just yet! If Styled-component becomes performance intensive for your app, we've got Emotion, which serves as the Modern Alternative to Styled-components.

Where Emotion Excels

Dual Syntax Support: Emotion supports both string and object styles, giving developers more flexibility depending on their use case or team preference.
Smaller Bundle Size: Emotion is generally more lightweight, which helps with faster page loads and better performance.
Framework-Agnostic: Emotion can be used outside of React, making it more versatile for different environments.

When to Choose Emotion Over Styled-Components

Use Case	Recommended Library
Need and prefer object-style syntax.	Emotion
Performance-critical app	Emotion
SSR with minimal config	Emotion
Prefer traditional CSS syntax	Styled-Components
Simple React-only project	Styled-Components

Now, dev teams in many companies really like this kind of styling way of Emotion & Styled Components. In modern dev world, we have some more superior alternatives and we are quickly catching up on them. So, let's go ahead.

4. CSS Files

This is the classic approach—writing styles in .css files and importing them into your React components. It’s simple, familiar to most developers, and works well for small to medium-sized projects.

Pros:

Easy to set up and understand.
Great for global styles and resets.
Works seamlessly with tools like PostCSS or Sass.

Cons:

Styles are global by default, which can lead to conflicts.
No built-in scoping or encapsulation.

Examples:

/* styles.css */
.header {
  padding: 10px 20px;
  text-align: center;
  color: white;
}

and use the CSS file by directly importing it -

import './styles.css';
function Header() {
  return <h2 className="header">Welcome to the Blog</h2>;
}

5. CSS Modules

CSS Modules solve the scoping issue by automatically generating unique class names. This allows you to write modular, reusable styles without worrying about naming collisions.

Pros:

Local scoping by default.
Cleaner and safer for large codebases.
Easy to integrate with existing CSS tooling.

Cons:

Slightly more setup than plain CSS. (negligible though)
Not ideal for global styles.

Example:

/* Header.module.css */
.title {
  padding: 10px 20px;
  text-align: center;
  color: white;
}

import styles from './Header.module.css';

function Header() {
  return <h2 className={styles.title}>Welcome to the Blog</h2>;
}

Developer's have CSS modules as their one of the most ideal and go to choice for its "No Runtime Overhead" nature, simplest integration with React and awesome tooling support! CSS Modules are supported by major bundlers like Webpack and Vite.

In case if you need global styles at some point, CSS Modules still has you covered!

You can still define global styles using :global selectors inside your module files.
This gives you flexibility without sacrificing encapsulation.

The best part is Developers working on different parts of the app won’t accidentally override each other’s styles. Ideal for large teams and enterprise-scale projects.

Even better, you can use CSS Modules as the uncovered region of inline styling. If you prefer inline styling the most, you can keep them with style objects created with named variables and then use CSS modules to style the focus and hover effects (pseudo selectors) and media queries. How cool is that?

What is more? CSS modules have a fantastic feature called composes. Let me show you what I mean -

/* styles.module.css */
.base {
  font-size: 16px;
}

.primary {
  composes: base;
  color: blue;
}

The composes keyword allows you to inherit styles from other classes, making it easy to reuse and extend styles without duplicating code.

6. CSS Frameworks

Frameworks like Tailwind CSS, Bootstrap, and Bulma offer utility-first or component-based styling out of the box. They can drastically speed up development and enforce consistency.

Pros:

Rapid prototyping.
Predefined responsive and accessible styles.
Large community and ecosystem.

Cons:

Can lead to bloated HTML with too many classes.
Requires learning the framework’s syntax and conventions.

Example (Tailwind):

function Header() {
  return <h2 className="p-4 text-center text-white bg-blue-500">Welcome to the Blog</h2>;
}

Concluding

Choosing the right styling method in React depends on your project’s scale, team preferences, and long-term maintainability goals. Whether you're building a quick MVP or a production-grade app, understanding these techniques empowers you to make informed decisions and write cleaner, more scalable code.

So go ahead—experiment, refactor, and find your groove. Because in the end, great styling isn’t just about aesthetics—it’s about clarity, consistency, and craftsmanship.

Now, if you found this article helpful, if this blog added some value to your time and energy, please show some love by giving the article some likes and share it with your dev friends.

Feel free to connect with me :)