Styling components

A product card, styled from a CSS file

A React component decides what is on the screen. How it looks is still CSS's job, the same CSS you write for any web page. Here is a product card with its look in a separate CSS file. The example has two tabs, App.jsx and styles.css, and its result is live under the code:

1export default function ProductCard() {2  return (3    <article className="card">4      <h3 className="card-title">Jasmine tea</h3>5      <p className="card-price">$4</p>6      <button className="card-button">Add to cart</button>7    </article>8  );9}

Lines 3 to 6 give each element a className, JSX's name for HTML's class attribute, as Writing markup with JSX explained. The styles.css tab has one rule per class: .card draws the orange border on line 4, .card-price makes the price orange and bold on lines 14 and 15, and .card-button colors the button. Press Edit & run, open styles.css, and change #c2410c on line 4 to teal: the border changes color as you type.

React's part is small. When it puts the <h3> on line 4 on the page, it writes <h3 class="card-title">. That's all. The browser then matches the rules in your stylesheet to the elements, exactly as it would for HTML you wrote by hand. React never reads your CSS.

How does styles.css reach the page? This preview links it for you. In a Vite project, a JavaScript file imports it, like the import "./index.css" in main.jsx that Setting up a React project showed, and Vite adds it to the page.

Plain CSS files apply to the whole page

A plain CSS file has no idea which component it was written for. Once it's on the page, its rules match every element on the page. That's fine until two files pick the same class name. This example has a ProductCard and a CartSummary, each with its own CSS file in its own tab:

1function ProductCard() {2  return (3    <article className="card">4      <h3 className="title">Jasmine tea</h3>5      <p>$4</p>6    </article>7  );8}9 10function CartSummary() {11  return (12    <aside className="summary">13      <p className="title">Cart: 2 items</p>14    </aside>15  );16}17 18export default function App() {19  return (20    <>21      <ProductCard />22      <CartSummary />23    </>24  );25}

Line 4 gives the product's heading className="title", and line 13 gives the cart's line the same class. In ProductCard.css, lines 7 to 9 make .title orange. In CartSummary.css, lines 5 to 8 make .title gray and capitals. Look at the result: JASMINE TEA is gray and in capitals too.

Both rules match both elements, because CSS is global. They have the same selector, .title, so the browser uses the one that comes later on the page, and CartSummary.css is linked after ProductCard.css. Press Edit & run and delete lines 5 to 8 of CartSummary.css: the product's title turns orange again, and so does the cart's line.

Importing the CSS file from the component that uses it doesn't change this. In a Vite project, ProductCard.jsx would import its own file like this:

import "./ProductCard.css";

export default function ProductCard() {
  return <h3 className="title">Jasmine tea</h3>;
}

Line 1 imports the file for its side effect, with no name. It tells the build tool "this component needs these rules", so they load whenever ProductCard is used. But the rules still go on the page for everyone: the import doesn't tie .title to this component. (This block has no result: the lesson's previews link CSS files themselves, and the two do the same thing.)

Teams that stay with plain CSS avoid clashes with naming rules: every class starts with its component's name, like product-card-title and cart-summary-title. You'll try that in an exercise. It works, but only as long as everyone follows the rule. CSS Modules make the build do it for you.

CSS Modules: class names that stay in their file

A CSS Module is a CSS file whose name ends in .module.css. You write ordinary rules in it. When your build tool loads it, it renames every class to a name no other file uses, and gives your component an object that maps the names you wrote to the new ones. Vite and Next.js support CSS Modules with no setup.

Here is the product card's CSS as a module, unchanged except for its file name:

.card {
  padding: 12px 16px;
  border: 2px solid #c2410c;
  border-radius: 12px;
}

.title {
  color: #c2410c;
}

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

export default function ProductCard() {
  return (
    <article className={styles.card}>
      <h3 className={styles.title}>Jasmine tea</h3>
      <p>$4</p>
    </article>
  );
}

Line 1 imports the module with a name, styles. It's a plain object: one property per class in the file. Line 5 reads styles.card and line 6 reads styles.title, so each element gets the new name of its class.

These two blocks have no live result. This site's previews link CSS files as they are and run no build step, so a .module.css file would stay global here, and its import would fail. To see what a module gives your component, here is the clash example from the last section with the build's work done by hand. Lines 2 and 3 are what each file's import styles would give it, and styles.css holds both files' rules after renaming:

1// What the build gives each file for its import styles from "./….module.css"2const productStyles = { card: "ProductCard_card_k3x9a", title: "ProductCard_title_k3x9a" };3const summaryStyles = { summary: "CartSummary_summary_p7m2q", title: "CartSummary_title_p7m2q" };4 5function ProductCard() {6  return (7    <article className={productStyles.card}>8      <h3 className={productStyles.title}>Jasmine tea</h3>9      <p>$4</p>10    </article>11  );12}13 14function CartSummary() {15  return (16    <aside className={summaryStyles.summary}>17      <p className={summaryStyles.title}>Cart: 2 items</p>18    </aside>19  );20}21 22export default function App() {23  return (24    <>25      <ProductCard />26      <CartSummary />27    </>28  );29}

Both components still say title in their code, on lines 8 and 17. But productStyles.title is ProductCard_title_k3x9a and summaryStyles.title is CartSummary_title_p7m2q, so the two rules in styles.css each match one element. The product's title is orange, and only the cart's line is gray. The names are made up for this lesson: Vite and Next.js each use their own form, with a short code that makes the name unique.

Three details you'll meet in real projects:

• A class name with a dash, like .card-title, is read with brackets: styles["card-title"]. Many teams write module classes in camelCase, like .cardTitle, so they can write styles.cardTitle.
• A class that isn't in the file is undefined, and React writes no class at all for className={undefined}. A typo gives you an unstyled element, not an error.
• A rule for a tag name alone, like h3 or button, isn't renamed, so it still reaches every <h3> on the page in a Vite project. Next.js stops the build with an error instead, saying the selector isn't "pure". Either way, keep module rules on classes.

Choosing classes from props and data

Often a component's look depends on its data: a tea on sale gets an orange border, a sold-out tea fades. Write one class for each look in your CSS, and pick the classes in JavaScript. className takes one string, with the classes separated by spaces, so the job is to build that string:

1const teas = [2  { id: "jasmine", name: "Jasmine tea", price: 4, onSale: true, stock: 5 },3  { id: "earl-grey", name: "Earl Grey", price: 3, onSale: false, stock: 0 },4  { id: "mint", name: "Mint tea", price: 2, onSale: false, stock: 8 },5];6 7function TeaCard({ tea }) {8  const classes = ["card"];9  if (tea.onSale) classes.push("on-sale");10  if (tea.stock === 0) classes.push("sold-out");11 12  return (13    <li className={classes.join(" ")}>14      <h3>{tea.name}</h3>15      <p>${tea.price}</p>16    </li>17  );18}19 20export default function App() {21  return (22    <ul className="shelf">23      {teas.map((tea) => (24        <TeaCard key={tea.id} tea={tea} />25      ))}26    </ul>27  );28}

Line 8 starts an array of classes with "card", which every tea gets. Line 9 adds "on-sale" when the tea is on sale, and line 10 adds "sold-out" when its stock is 0. Line 13 joins the array into one string with a space between the words: "card on-sale" for Jasmine tea, "card sold-out" for Earl Grey, and "card" for Mint tea. In styles.css, .on-sale on lines 20 to 27 colors the border and adds " · Sale" after the name with ::after, and .sold-out on lines 29 to 32 fades the card and strikes it through. Change stock: 8 on line 4 to stock: 0, and Mint tea fades too.

A shorter way to write the same idea puts the condition right in a template literal, with the && operator that Conditional rendering used. It looks right, and it has a bug on purpose:

1const teas = [2  { id: "jasmine", name: "Jasmine tea", price: 4, onSale: true, stock: 5 },3  { id: "earl-grey", name: "Earl Grey", price: 3, onSale: false, stock: 0 },4  { id: "mint", name: "Mint tea", price: 2, onSale: false, stock: 8 },5];6 7function TeaCard({ tea }) {8  return (9    <li className={`card ${tea.onSale && "on-sale"}`}>10      <h3>{tea.name}</h3>11      <p>${tea.price}</p>12    </li>13  );14}15 16export default function App() {17  return (18    <ul className="shelf">19      {teas.map((tea) => (20        <TeaCard key={tea.id} tea={tea} />21      ))}22    </ul>23  );24}

Line 9 writes `card ${tea.onSale && "on-sale"}`. For Jasmine tea, tea.onSale is true, and && gives "on-sale". For Earl Grey it's false, and && gives false. In JSX, React shows nothing for false, but a template literal isn't JSX: it turns false into the text "false". Earl Grey's card gets class="card false". Nothing looks wrong, because no rule matches .false. It stays a hidden bug until someone writes one, or until a test looks for an exact class.

See it for yourself. Pick a way to build the class string, switch the tea's data, and read the class attribute React really wrote:

1function TeaCard({ name, onSale, soldOut }) {2  const className = `card ${onSale && "on-sale"} ${soldOut && "sold-out"}`;3  return <li className={className}>{name}</li>;4}

With && in a template and both switches off, the card gets class="card false false". ? : in a template gives "card " plus spaces, which the browser ignores: correct, if untidy. filter and join gives exactly "card", then "card on-sale", then "card on-sale sold-out", because filter(Boolean) drops every false value before join runs.

Many projects use a tiny library for this, clsx: clsx("card", onSale && "on-sale", soldOut && "sold-out") skips false values and joins the rest, like the array above. It's a convenience, not something React needs.

Style objects for values from your data

JavaScript in JSX with curly braces showed the style attribute: an object with camelCase properties, where a number on a size gets px. Classes and style objects aren't two equal ways to do the same thing. They're for different jobs. How to read the table: each row is something you might want, and whether each way can do it.

So the fixed look goes in CSS, and only the values from data go in style. React's documentation recommends the same: classes by default, and style only when a value depends on JavaScript.

You can have both at once with a CSS variable (a custom property, a name that starts with --). Set the variable with style, and let the stylesheet read it with var(). Then every rule can use the value from your data, including :hover:

1const teas = [2  { id: "matcha", name: "Matcha", color: "#15803d" },3  { id: "hibiscus", name: "Hibiscus", color: "#be123c" },4  { id: "chai", name: "Masala chai", color: "#b45309" },5];6 7function TeaCard({ tea }) {8  return (9    <li className="card" style={{ "--accent": tea.color }}>10      <h3>{tea.name}</h3>11      <button>Add to cart</button>12    </li>13  );14}15 16export default function App() {17  return (18    <ul className="shelf">19      {teas.map((tea) => (20        <TeaCard key={tea.id} tea={tea} />21      ))}22    </ul>23  );24}

Each tea on lines 2 to 4 has its own color. Line 9 sets one property, "--accent", to that color. Its name has dashes, so it's written in quotes, and React writes it as it is: style="--accent: #15803d;" for Matcha. In styles.css, line 11 draws the border in var(--accent), line 16 tints the background on hover, and line 27 colors the button. Hover over a card: each one tints in its own color, which a style object alone can't do. Add a fourth tea to the array with color: "#7c3aed", and it arrives with a purple border, button, and hover.

React 19: a component can bring its own stylesheet

Since React 19, a component can render the stylesheet it needs, right next to its markup. Give a <style> tag two props, href (a name for the stylesheet) and precedence (where it ranks against other stylesheets), and React treats it as a stylesheet for the whole page:

1const badgeCss = `.sale-badge {2  margin-left: 6px;3  padding: 2px 8px;4  border-radius: 999px;5  background: #c2410c;6  color: white;7  font-size: 12px;8}`;9 10function SaleBadge({ children }) {11  return (12    <>13      <style href="sale-badge" precedence="default">{badgeCss}</style>14      <span className="sale-badge">{children}</span>15    </>16  );17}18 19export default function App() {20  function countStyles() {21    const found = document.head.querySelectorAll("style[data-precedence]");22    console.log(`<style> tags React put in <head>: ${found.length}`);23  }24 25  return (26    <>27      <ul>28        <li>Jasmine tea <SaleBadge>20% off</SaleBadge></li>29        <li>Mint tea <SaleBadge>New</SaleBadge></li>30        <li>Masala chai <SaleBadge>Last 3</SaleBadge></li>31      </ul>32      <button onClick={countStyles}>Count the style tags</button>33    </>34  );35}

Lines 1 to 8 hold the badge's CSS in a string. SaleBadge returns two things in a Fragment: line 13 is the <style> with href="sale-badge" and precedence="default", and line 14 is the badge itself. Lines 28 to 30 use it three times, so React renders three <style> tags.

Press Count the style tags. The console under the result says <style> tags React put in <head>: 1. React moved the stylesheet out of the list and into the page's <head>, as <style data-href="sale-badge" data-precedence="default">, and kept one copy for the one href. Line 21 finds it by its data-precedence attribute. (The button's onClick runs countStyles when you click; Responding to events covers it.) Now delete precedence="default" from line 13 and press the button again: it counts 0. Without both props, React leaves each <style> where you wrote it, three copies inside the list. The badges still look the same, because a browser applies a <style> wherever it is.

precedence decides the order of stylesheets in <head>, and so which one wins a clash: React ranks the values in the order it first meets them, lower first. The same works for a stylesheet file with <link>:

function StoreMap() {
  return (
    <>
      <link rel="stylesheet" href="/store-map.css" precedence="default" />
      <div className="store-map">…</div>
    </>
  );
}

Line 4 links store-map.css. With precedence, React puts the <link> in <head> once, however many maps render, and waits for the file to load before it shows the map, so it never appears unstyled. (This block has no result, because the preview has no store-map.css to load.) React notes three limits for these tags: it ignores changes to their props after the first render, it drops props other than href and precedence from a <style>, and it may keep the stylesheet after the component is gone.

You'll rarely write these tags by hand in an app: a project-wide CSS file is simpler. They matter most to libraries, as the next section shows. The Metadata, stylesheets and resource hints lesson comes back to stylesheets, with server rendering.

Tailwind and CSS-in-JS

Two more families are common in React projects. Both need a package installed, so this lesson shows what they do without depending on them.

Tailwind: many small classes

Tailwind CSS gives you a large set of utility classes: class names that each do one small thing, like px-4 for padding on the left and right, or font-bold. You style an element by listing them in its className, and you rarely write CSS yourself. Here is the overview's card, written that way:

1export default function ProductCard() {2  return (3    <article className="max-w-56 rounded-xl border-2 border-orange-700 px-4 py-3">4      <h3 className="mb-1 font-bold">Jasmine tea</h3>5      <p className="mb-2 font-bold text-orange-700">$4</p>6      <button className="rounded-lg bg-orange-700 px-3 py-1.5 text-white hover:bg-orange-900">7        Add to cart8      </button>9    </article>10  );11}

Line 3 gives the card a maximum width, rounded corners, a 2px orange border, and padding. Line 6 styles the button, and hover:bg-orange-900 darkens it while the mouse is over it. Hover over the button to see it. The utilities.css tab is a stand-in written for this lesson: simplified copies of the few rules Tailwind would write for these classes, because the preview doesn't run Tailwind. So only those classes work here: change px-4 on line 3 to px-8, and the padding disappears, because there's no rule for px-8 in the tab.

In a real project, that's the job Tailwind does while you build. Its build plugin scans your files for class names it knows and writes a rule only for each one it finds, so px-8 would simply work. The page gets one ordinary CSS file. To set it up in a Vite project with Tailwind 4 (the current major version, 4.3, when this lesson was checked in October 2026), you install tailwindcss and its Vite plugin, @tailwindcss/vite, add the plugin to vite.config.js, and put one line in your main CSS file:

/* src/index.css */
@import "tailwindcss";

What Tailwind costs: long className strings, a set of class names to learn, and a build step. What it saves: naming classes, and clashes, because px-4 means the same everywhere. Building class strings from data works the same way as in the last sections, but write whole class names in your code, like onSale ? "border-orange-700" : "border-gray-400": the scan finds class names as text in your files, so a name glued together while the app runs, like `border-${color}-700`, gets no rule.

CSS-in-JS: styles written in JavaScript

CSS-in-JS libraries let you write CSS inside your component files, in JavaScript. The best known is styled-components, with Emotion close behind. Here is the card with styled-components:

import styled from "styled-components";

const Card = styled.article`
  padding: 12px 16px;
  border: 2px solid ${(props) => props.$accent};
  border-radius: 12px;
`;

export default function ProductCard({ name, accent }) {
  return (
    <Card $accent={accent}>
      <h3>{name}</h3>
    </Card>
  );
}

Lines 3 to 7 make Card, a component that renders an <article> with the CSS between the backticks. Line 5 reads a prop, $accent, so each card's border can have its own color; the $ keeps the prop from reaching the page as an attribute. Lines 11 to 13 use Card like any component. (This block has no result, because the preview has no styled-components installed.)

When Card renders, the library builds the CSS text with the accent filled in, makes a class name from a short code of that text, adds a rule for it to the page if it isn't there yet, and gives the <article> that class. This is runtime CSS-in-JS: the CSS is made in the browser, while the app runs. To see that happen, here is a small model written for this lesson, not a real library, in 20 lines:

1function hash(text) {2  let total = 0;3  for (const char of text) total = (total * 31 + char.charCodeAt(0)) % 1000000;4  return total.toString(36);5}6 7function css(text) {8  const name = "css-" + hash(text);9  return { name, rule: `.${name} { ${text} }` };10}11 12function Card({ accent, children }) {13  const style = css(`border: 2px solid ${accent}; border-radius: 12px; padding: 8px 12px; margin: 4px 0;`);14  return (15    <>16      <style href={style.name} precedence="default">{style.rule}</style>17      <article className={style.name}>{children}</article>18    </>19  );20}21 22export default function App() {23  function showRules() {24    for (const tag of document.head.querySelectorAll("style[data-precedence]")) {25      console.log(tag.textContent);26    }27  }28 29  return (30    <>31      <Card accent="#15803d">Matcha</Card>32      <Card accent="#be123c">Hibiscus</Card>33      <Card accent="#15803d">Sencha</Card>34      <button onClick={showRules}>Show the CSS rules</button>35    </>36  );37}

Lines 1 to 5 turn any text into a short code: the same text always gives the same code. Lines 7 to 10, css, make a class name from that code and a rule for it. On line 13 each Card works out its CSS with its own accent, and line 16 renders the rule as a React 19 <style>, with the class name as its href. Press Show the CSS rules. The console shows two rules, not three: Matcha and Sencha have the same accent, so the same CSS, the same class name, and one <style>. Change Sencha's accent on line 33, and a third rule appears.

Making CSS while the app runs has costs. The library's code downloads with your app and runs on every render. The browser has to work out its styles again each time a new rule arrives. React's documentation recommends against adding <style> tags while the app runs for these reasons, and suggests CSS files for fixed styles with style objects for the values from data.

There's a second cost with Server Components, which some frameworks, like Next.js, use: components that run on the server only, once, and send their result to the browser. They can't use context or effects, which runtime CSS-in-JS libraries long relied on to collect and add their rules. So in those apps, the libraries have needed a Client Component, a component marked to run in the browser too; Next.js's CSS-in-JS guide, checked in October 2026, still lists Emotion as working on support. React 19's <style href precedence> changed what's possible: since version 6.3 (January 2026), styled-components works in Server Components by rendering those tags, much like the model above. The Server Components lesson explains them.

A third family, zero-runtime CSS-in-JS, like vanilla-extract and StyleX, lets you write styles in JavaScript and turns them into a CSS file while you build, like CSS Modules. How to read the table: each row is one way to style, and each column asks the same question of all of them.

None of these is the "React way": React only writes class and style. Teams pick what fits their project. A plain CSS file or CSS Modules need nothing extra, Tailwind trades CSS files for class lists, and CSS-in-JS keeps styles in JavaScript at a cost that depends on when it makes the CSS.

A plan picker that uses each tool for its job

A real component usually mixes the tools, each for what it's good at. Here is a plan picker for a subscription page:

1const plans = [2  { id: "starter", name: "Starter", price: 0, color: "#0f766e", soldOut: false },3  { id: "plus", name: "Plus", price: 8, color: "#c2410c", soldOut: false },4  { id: "team", name: "Team", price: 20, color: "#7c3aed", soldOut: true },5];6const selectedId = "plus";7 8function PlanCard({ plan, selected }) {9  const classes = ["plan"];10  if (selected) classes.push("is-selected");11  if (plan.soldOut) classes.push("is-sold-out");12 13  return (14    <li className={classes.join(" ")} style={{ "--accent": plan.color }}>15      <h3>{plan.name}</h3>16      <p>{plan.price === 0 ? "Free" : `$${plan.price} a month`}</p>17    </li>18  );19}20 21export default function App() {22  return (23    <ul className="plans">24      {plans.map((plan) => (25        <PlanCard key={plan.id} plan={plan} selected={plan.id === selectedId} />26      ))}27    </ul>28  );29}

• The CSS file holds the fixed look: the three columns, the border, the hover tint, and the @media rule that stacks the plans in one column when the result is narrower than 420px.
• Classes for states: lines 9 to 11 add is-selected to the chosen plan and is-sold-out to Team, and line 14 joins them. The CSS gives the selected plan an outline, and the sold-out one a faded look with " · Sold out" after its price.
• A CSS variable for data: line 14 also sets --accent from each plan's color, so the border, outline, and hover tint follow the plan.

Change selectedId on line 6 to "starter": the outline moves to Starter, in teal. Nothing in the CSS changed; only the data did.

Sort each job into the tool that fits it:

Common mix-ups

• "React has its own way of styling." No. React writes class and style attributes. The browser's CSS does all the styling.
• "Importing a CSS file into a component keeps its rules to that component." No. A plain CSS import adds the rules to the whole page. CSS Modules are what keep class names to one file.
• "Style objects are the React way to style." No. Classes are the default. A style object is for values from data, and it can't do :hover, media queries, or ::after.
• "`card ${onSale && "sale"}` adds nothing when onSale is false." It adds the word false. In a template literal, false becomes text. Use a ternary, or filter an array.
• "Tailwind puts all of its classes on the page." No. Its build writes rules only for the class names it finds in your files.
• "CSS-in-JS doesn't work with React 19." It depends on the library and on where the component runs. In the browser, they work. In Server Components, many need a Client Component, and some now use React 19's <style>.

Practice exercises

Each exercise shows its result under the code, or when you press Edit & run. The CSS files are tabs you can edit too. For the first one, answer before you run anything.

const soldOut = false;

export default function TeaCard() {
  return <li className={`card ${soldOut && "sold-out"}`}>Earl Grey</li>;
}

1const soldOut = false;2 3export default function TeaCard() {4  return <li className={`card ${soldOut ? "sold-out" : ""}`}>Earl Grey</li>;5}

1export default function ProductCard() {2  return (3    <article className="card">4      <h3>Jasmine tea</h3>5      <p>$4</p>6    </article>7  );8}

1export default function ProductCard() {2  return (3    <article className="card">4      <h3>Jasmine tea</h3>5      <p className="card-price">$4</p>6    </article>7  );8}

1function ProductCard() {2  return (3    <article className="card">4      <h3 className="title">Jasmine tea</h3>5      <p>$4</p>6    </article>7  );8}9 10function CartSummary() {11  return (12    <aside className="summary">13      <p className="title">Cart: 2 items</p>14    </aside>15  );16}17 18export default function App() {19  return (20    <>21      <ProductCard />22      <CartSummary />23    </>24  );25}

1function ProductCard() {2  return (3    <article className="product-card">4      <h3 className="product-card-title">Jasmine tea</h3>5      <p>$4</p>6    </article>7  );8}9 10function CartSummary() {11  return (12    <aside className="cart-summary">13      <p className="cart-summary-title">Cart: 2 items</p>14    </aside>15  );16}17 18export default function App() {19  return (20    <>21      <ProductCard />22      <CartSummary />23    </>24  );25}

1const tabs = ["Profile", "Account", "Billing"];2const activeTab = "Account";3 4export default function SettingsTabs() {5  return (6    <ul className="tabs">7      {tabs.map((tab) => (8        <li key={tab} className="tab">9          {tab}10        </li>11      ))}12    </ul>13  );14}

1const tabs = ["Profile", "Account", "Billing"];2const activeTab = "Account";3 4export default function SettingsTabs() {5  return (6    <ul className="tabs">7      {tabs.map((tab) => (8        <li key={tab} className={tab === activeTab ? "tab is-active" : "tab"}>9          {tab}10        </li>11      ))}12    </ul>13  );14}

1const order = { item: "Masala chai", step: 3, steps: 4 };2 3export default function DeliveryProgress() {4  const percent = (order.step / order.steps) * 100;5 6  return (7    <section>8      <p>{order.item}: step {order.step} of {order.steps}</p>9      <div className="track">10        <div className="fill" />11      </div>12    </section>13  );14}

1const order = { item: "Masala chai", step: 3, steps: 4 };2 3export default function DeliveryProgress() {4  const percent = (order.step / order.steps) * 100;5 6  return (7    <section>8      <p>{order.item}: step {order.step} of {order.steps}</p>9      <div className="track">10        <div className="fill" style={{ width: `${percent}%` }} />11      </div>12    </section>13  );14}

1const toastCss = `.toast {2  margin: 4px 0;3  padding: 6px 12px;4  border-left: 4px solid #0f766e;5  border-radius: 6px;6}`;7 8function Toast({ children }) {9  return <p className="toast">{children}</p>;10}11 12export default function App() {13  function countStyles() {14    const found = document.head.querySelectorAll("style[data-precedence]");15    console.log(`<style> tags React put in <head>: ${found.length}`);16  }17 18  return (19    <>20      <Toast>Saved your address.</Toast>21      <Toast>Matcha added to cart.</Toast>22      <Toast>Order placed.</Toast>23      <button onClick={countStyles}>Count the style tags</button>24    </>25  );26}

1const toastCss = `.toast {2  margin: 4px 0;3  padding: 6px 12px;4  border-left: 4px solid #0f766e;5  border-radius: 6px;6}`;7 8function Toast({ children }) {9  return (10    <>11      <style href="toast" precedence="default">{toastCss}</style>12      <p className="toast">{children}</p>13    </>14  );15}16 17export default function App() {18  function countStyles() {19    const found = document.head.querySelectorAll("style[data-precedence]");20    console.log(`<style> tags React put in <head>: ${found.length}`);21  }22 23  return (24    <>25      <Toast>Saved your address.</Toast>26      <Toast>Matcha added to cart.</Toast>27      <Toast>Order placed.</Toast>28      <button onClick={countStyles}>Count the style tags</button>29    </>30  );31}

Check your understanding

For class questions, write down the string the code builds, word by word. Press Edit & run on a question's code to check your answer.

Key takeaways

• React writes className as the page's class, and style as its style attribute. The browser's CSS does the rest; React never reads it.
• Plain CSS files are global, even when a component imports them. The same class in two files clashes, and the later rule wins.
• CSS Modules rename each .module.css file's classes, and give you an object of the new names: styles.title.
• Build class strings from data with a ternary, or an array with filter(Boolean).join(" "). A template literal with && writes the word false.
• Use style for values from data, often as a CSS variable the stylesheet reads. Hover, media queries, and ::after need CSS rules.
• In React 19, <style> and <link rel="stylesheet"> with href and precedence go in <head>, once per href.
• Tailwind writes rules for the utility classes it finds while you build. Runtime CSS-in-JS makes CSS in the browser, which costs time and often needs a Client Component with Server Components.

Coming next: Responding to events. It starts the Adding interactivity stage: event handlers, passing them as props, and how a click travels through the tree.