Styling in React is flexible.
You are not limited to one method — React supports multiple ways to write and organize CSS depending on your project’s needs.

In this Hasenode-style blog, we explore all major styling approaches in React with examples, pros, cons, and best practices.

---

⭐ Why Styling Matters in React

React focuses on building UI components.
Styling those components is equally important, because:

✔ Good UI attracts users
✔ Good styling boosts experience
✔ Component-based CSS improves maintainability
✔ Reusable styles make development faster

React doesn’t come with built-in CSS solutions, but offers powerful approaches to style your app.

---

🧵 1. Traditional CSS (Global CSS)

This is the simplest method — using standard .css files.

Example:

App.css

.title {
  color: blue;
  font-size: 24px;
}

App.js

import "./App.css";

function App() {
  return <h1 className="title">Hello React</h1>;
}

✔ Pros

• Simple

• Familiar

• Works everywhere

❌ Cons

• Styles are global

• Class name conflicts

• Not ideal for large apps

---

📦 2. CSS Modules (Recommended for large applications)

CSS Modules automatically scope CSS locally to a component.

Example:

Button.module.css

.btn {
  background: green;
  color: white;
  padding: 10px;
}

Button.js

import styles from "./Button.module.css";

export default function Button() {
  return <button className={styles.btn}>Click</button>;
}

✔ Pros

• No class name conflicts

• Localized styles

• Great for scaling

❌ Cons

• Slightly more setup

• Harder to reuse globally

---

🎯 3. Inline Styling

Inline styling uses JavaScript objects.

const boxStyle = {
  backgroundColor: "yellow",
  padding: "20px",
  borderRadius: "10px"
};

function Box() {
  return <div style={boxStyle}>Styled Box</div>;
}

✔ Pros

• Dynamic styling

• No external files needed

❌ Cons

• No pseudo classes (:hover)

• Hard to maintain in large projects

---

🌈 4. Styled Components (CSS-in-JS)

A powerful library for creating styled React components.

Install:

npm install styled-components

Example:

import styled from "styled-components";

const Button = styled.button`
  background: purple;
  padding: 10px 20px;
  color: white;
  border-radius: 8px;
`;

function App() {
  return <Button>Click Me</Button>;
}

✔ Pros

• Component scoped

• Supports dynamic styles

• Supports nesting, theming, props

❌ Cons

• Requires extra library

• Slight runtime overhead

---

🖼 5. Tailwind CSS (Utility-first Framework)

Tailwind is becoming extremely popular in React projects.

Install:

npm install -D tailwindcss
npx tailwindcss init

Example:

<h1 className="text-3xl font-bold text-red-500">
  Hello Tailwind
</h1>

✔ Pros

• Fast development

• No custom CSS required

• Mobile responsive utilities built-in

❌ Cons

• Long class strings

• Learning curve for beginners

---

🎭 6. SASS / SCSS

React also supports SCSS for nested and advanced CSS syntax.

Install:

npm install sass

Example:

.container {
  padding: 20px;

  .title {
    color: red;
  }
}

✔ Pros

• Nesting

• Mixins

• Variables

❌ Cons

• Larger bundle size

• Requires build setup

---

⚡ 7. Dynamic Styling With Props

React allows conditional styles using inline styles or CSS classes.

Using inline style:

function Badge({ type }) {
  return (
    <span
      style={{
        backgroundColor: type === "success" ? "green" : "red",
      }}
    >
      {type}
    </span>
  );
}

Using classnames:

Install:

npm install classnames

import cls from "classnames";

<div className={cls("btn", { active: isActive })}>Button</div>

---

🎨 8. Global Styles with Styled Components or Emotion

Styled-components allows global styles:

createGlobalStyle`
  body {
    padding: 0;
    margin: 0;
    font-family: Arial;
  }
`;

---

📌 Which Styling Method Should You Use?

---

🎯 Final Thoughts

React gives you complete freedom in styling your components.
Your choice depends on:

• Team size

• Project scale

• Design system

• Reusability needs

• Build performance

No single method works for everyone — but knowing all of them makes you a well-rounded React developer.