Component Styling

Introduction

React does not force you into a single way of styling your components. Unlike some frameworks that ship with an official styling solution, React leaves the choice entirely up to you — which is powerful, but can feel overwhelming when you first see how many options exist.

This lesson is a survey: a bird's-eye tour of the main approaches you will encounter in real React codebases. You will not go deep into any single one here — the next several lessons each dedicate themselves to one approach in detail. By the end of this lesson, you will know what options exist, roughly how each one works, and which situations they tend to fit best.

The Styling Landscape

Every styling approach in React ultimately produces the same thing — CSS applied to rendered HTML — but they differ in how class names are scoped, how dynamic values are handled, and how much tooling is required.

Plain CSS Files

The simplest approach is exactly what you likely already know from plain HTML and CSS: write a .css file and import it into a component. The styles apply globally to the whole page, exactly as they would in a non-React project.

import './Card.css';

function Card({ title, children }) {
  return (
    <div className="card">
      <h3 className="card-title">{title}</h3>
      <div className="card-body">{children}</div>
    </div>
  );
}

export default Card;

.card {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 16px;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
}

CSS Modules

CSS Modules look almost identical to plain CSS files, but with one crucial difference: the file is named with a .module.css suffix, and the build tool automatically rewrites every class name to be unique to that file. This means you get the scoping benefits of a component-based system while still writing ordinary CSS.

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

function Card({ title }) {
  return <div className={styles.card}>{title}</div>;
}

Under the hood, styles.card resolves to something like card_a8f3e, guaranteeing no other component's .card class can ever collide with it. We will dig into this fully in the next lesson.

Inline Style Objects

React also lets you style an element directly using the style prop, passed as a JavaScript object rather than a CSS string. This is useful for styles computed at runtime, such as a progress bar width based on a percentage.

function ProgressBar({ percent }) {
  return (
    <div style={{ width: `${percent}%`, backgroundColor: '#4caf50' }} />
  );
}

Inline styles skip the CSS file entirely, trading some CSS features (like :hover) for the convenience of plain JavaScript values. You will look at this in depth two lessons from now.

Utility Frameworks

Frameworks like Bootstrap and Tailwind CSS ship large libraries of prebuilt, single-purpose class names — things like d-flex, p-3, or text-center — that you compose directly in your JSX className attribute instead of writing custom CSS rules yourself.

You will get a full, hands-on lesson on using Bootstrap with React shortly after CSS Modules and inline styling.

CSS-in-JS Libraries

A final category worth knowing about is CSS-in-JS: libraries such as styled-components or Emotion that let you author actual CSS syntax inside your JavaScript or TypeScript files, often attached directly to a component definition.

import styled from 'styled-components';

const Button = styled.button`
  background: #4f46e5;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
`;

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

Choosing an Approach

There is no single "correct" choice — different teams and projects have different needs. The table below gives a rough sense of when each approach tends to shine.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

You now have a map of the styling landscape in React: plain CSS, CSS Modules, inline styles, utility frameworks, and CSS-in-JS libraries. Each solves the same underlying problem — making components look right — with different trade-offs around scoping, dynamism, and tooling.

With this overview in place, the next lesson dives deep into CSS Modules, the approach that gives you the safety of scoped class names while still writing ordinary CSS.