Styling React Components

CSS files + className

The most common approach: write normal CSS in a .css file, import it, and use className.

/* App.css */
.btn { background: #4338ca; color: white; padding: 10px 18px; border: none; border-radius: 8px; }

This is just ordinary CSS in a file called App.css. It defines one class, .btn, with a purple background, white text, padding and rounded corners — nothing React-specific yet.

// App.jsx
import './App.css';

function App() {
  return <button className="btn">Styled with a CSS class</button>;
}

In the component file we import './App.css' at the top — this tells the build tool to load that stylesheet. Then on the button we write className="btn" to attach the .btn rule. Remember: in JSX it is className, not class. The result is a purple, rounded button.

Inline styles (an object)

Inline styles use a JavaScript object with camelCased properties — note the double braces {{ }} (one for JSX, one for the object).

function App() {
  const boxStyle = { background: "#06b6d4", color: "white", padding: 14, borderRadius: 10 };
  return <div style={boxStyle}>Styled with an inline style object</div>;
}

Here the style is a JavaScript object stored in boxStyle: keys like background and borderRadius with their values. We attach it with style={boxStyle}. The double braces you often see — style={{ ... }} — are simply the object written inline: the outer { } is “JavaScript here”, and the inner { } is the object itself. Note keys are camelCase (borderRadius, not border-radius).