Styling with CSS

Learn to style with className from an external CSS file.

The simplest styling method in React is using an external CSS file with className. In JSX you write className, not class.

Example: <button className="btn">Save</button>. A CSS rule .btn { color: blue; } paints this button.

You import the CSS file into JSX; Vite/Webpack loads it automatically. This method is familiar and works in big projects.

Importing a CSS file

You import the CSS file at the top of the component file: import "./Button.css". The bundler adds it to the page automatically.

With this method styles are global; if two components use the same class name they clash. This is why CSS Modules or scoped solutions are preferred.

For now we learn the simplest method; Modules come later.

Complete the skeleton. Write a SaveButton component that returns <button className="btn">Save</button>. Export it.

Show example solution

function SaveButton() {
  return <button className="btn">Save</button>;
}

export default SaveButton;

Styling with CSS: fill in the missing part

<button className="____">Save</button>

Show answer

<button className="btn">Save</button>

Next lesson: CSS Modules