React · Chapter 24 of 42
Styling Options
React doesn't prescribe one styling approach — you can use plain CSS files, inline styles, CSS Modules, CSS-in-JS libraries (like styled-components), or utility frameworks like Tailwind CSS.
Each approach has trade-offs in scoping, performance, and developer experience.
Inline styles
Pass a style object directly: `<div style={{ color: 'red' }}>`. Good for dynamic, one-off values but lacks pseudo-classes and media queries.
Other approaches
Plain CSS files (global scope), CSS Modules (locally scoped), CSS-in-JS (styles colocated in JS), and utility-first frameworks like Tailwind are all common in React apps.
Example 1 (jsx)
function Alert() {
const style = { color: "white", background: "crimson", padding: 8 };
return <div style={style}>Warning!</div>;
}Output
Warning! (white text on a crimson background)An inline style object is applied directly to the element.
Key points
- React supports many styling approaches: CSS, inline styles, CSS Modules, CSS-in-JS, Tailwind.
- Inline styles use JS objects with camelCase property names.
- Global CSS files can cause class name collisions in large apps.
- Choose a styling strategy based on team preference and project scale.
💡 Note: There is no single 'React way' to style — pick what fits your team and project.