Stop 03 · CSS3Styling Tools & Libraries · 4/5

Styled Components

In short

Styled Components lets React developers write real CSS inside JavaScript, tied to a component. You'll find it in a lot of existing React codebases.

A CSS-in-JS library that lets you write actual CSS inside JavaScript/TypeScript, scoped automatically to the component that defines it. The approach can improve component-local styling and dynamic theming, but developers should understand rendering costs, server rendering considerations, and alternative styling strategies.

The jaadu mascot sews a small name tag into a shirt collar in a hostel laundry room.

Think of it like this

A shirt with the name tag sewn in

In a hostel laundry, shirts with sewn-in name tags never get mixed up. Styled Components sews the styles into the component itself. The button carries its own CSS wherever it goes, and it can't clash with anyone else's.

Watch it happen

What happens when <Button> renders

React

styled-comp

<head>

render $variant="danger"

1/4React renders a Button with the danger variant.

The big ideas

What you need to know

CSS in a template literal

styled.button`...` creates a React component with those styles. You write normal CSS syntax inside.

Auto-scoped class names

It generates unique class names, so two components can both have a 'title' style without clashing.

Props change styles

Pass props like $variant="danger" and use them inside the CSS to switch colours.

Runs in the browser

Styles are created with JavaScript at runtime. In Next.js Server Components, zero-runtime options like CSS Modules or Tailwind usually fit better.

See it in code

Walk through the code

tsx

1import styled from "styled-components";2 3const Button = styled.button<{ $variant?: "primary" | "danger" }>`4  padding: 0.6rem 1.2rem;5  border: none;6  border-radius: 8px;7  color: white;8  background: ${(p) => (p.$variant === "danger" ? "#dc2626" : "#ec4899")};9 10  &:hover { opacity: 0.9; }11`;12 13export default function Actions() {14  return <><Button>Save</Button> <Button $variant="danger">Delete</Button></>;15}

1/4styled.button creates a React component. The type says which props it accepts.

The $ prefix marks a 'transient' prop, so $variant is used for styling but isn't passed down to the real <button> in the DOM.

Save yourself the pain

Common mistakes

Oops

Creating styled components inside another component's function body.

Do this instead

Define them outside, at the top level. Otherwise they're recreated on every render.

Oops

Picking it for a brand new Next.js App Router project without checking.

Do this instead

It needs extra setup and only works in Client Components there. Compare with CSS Modules or Tailwind first.

Your mission

A themed button set

~30 min

Quick check

Why prefix a styling prop with $ in Styled Components, like $variant?

Go deeper

1Convert one React component's CSS module into a styled-component. Validate your understanding by applying it in a small practical example.
2Practice passing props into a styled-component to change its styles dynamically. Test it with at least one normal case and one edge case so you can explain the behavior confidently.
3Learn the runtime cost trade-off vs zero-runtime alternatives like Tailwind.

More styling tools & libraries at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download