React · Theory

CSS in React

Theory

28/94

CSS in React

In React you still write CSS. Common ways: import './Card.css' + className, CSS modules (Card.module.css → styles.title), inline style objects, Tailwind utilities, CSS-in-JS. className, not class. One imported CSS file is global unless you use modules.

Pick one approach per project. Mixing Bootstrap grid + Tailwind + inline chaos is how UIs rot. Interview: name two methods and when you’d pick modules (avoid name clashes).

CSS in React — on screen — Hello inside .card styles. File import applies globally unless modules.

Exam tip

className + one styling approach.

Example

// CSS
import "./Card.css";

export default function Card() {
  return <article className="card">Hello</article>;
}

CSS in React — on screen: Hello inside .card styles. File import applies globally unless modules.

Short notes

RuleclassName.
Ways : file / modules / inline / Tailwind.
Trapglobal class name clashes.

React · Theory

CSS in React

← All stacks

Theory

28/94

CSS in React

Pick one approach per project. Mixing Bootstrap grid + Tailwind + inline chaos is how UIs rot. Interview: name two methods and when you’d pick modules (avoid name clashes).

CSS in React — on screen — Hello inside .card styles. File import applies globally unless modules.

Exam tip

className + one styling approach.

Example

// CSS
import "./Card.css";

export default function Card() {
  return <article className="card">Hello</article>;
}

CSS in React — on screen: Hello inside .card styles. File import applies globally unless modules.

Short notes

RuleclassName.
Ways : file / modules / inline / Tailwind.
Trapglobal class name clashes.

CSS in React

Example

Short notes

Questions

CSS in React

Example

Short notes

Questions