Building a React application is only half the job — the other half is making it look good. In traditional HTML, styling means the class attribute plus a separate CSS file, but because JSX compiles down to JavaScript function calls, React handles styling a bit differently.

React supports several distinct approaches to styling, from basic class names to dynamic inline styles and locally scoped CSS Modules, each suited to different situations.

The most fundamental rule of React styling: never use class in JSX. class is a reserved keyword in JavaScript, used for defining object-oriented classes, and since JSX compiles down to JavaScript function calls, using class as an attribute name would conflict with that.

React requires className instead, and automatically translates it back into a standard class attribute when it renders the actual HTML to the DOM — so the underlying browser output is identical to writing class directly.

Importing an entire CSS file can be overkill for a single style, especially one that needs to change dynamically based on state. React supports inline styles through the style prop — but unlike standard HTML, where style takes a CSS string, React requires a JavaScript object instead.

A style object like const headerStyle = { backgroundColor: 'blue', fontSize: '24px' } gets passed directly as <h1 style={headerStyle}>, applying those declarations straight to the element.

Inside a React inline style object, every CSS property that normally contains a hyphen — like background-color or font-size — must be rewritten in camelCase, as backgroundColor and fontSize. This isn't a React-specific quirk; it's because hyphens aren't valid inside unquoted JavaScript object property names.

So style={{ backgroundColor: 'black', color: 'white' }} is correct, while style={{ background-color: 'black' }} is a syntax error — properties without hyphens, like color, stay exactly as they are in CSS.

Inline styles are often written with what looks like a special double-curly-brace syntax, like style={{ color: 'red' }} — but there's nothing magic about it. It's simply a JavaScript object literal placed inside a normal JSX interpolation.

The outer { } tells JSX "this is JavaScript, not a string," and the inner { } is the object literal itself, with color: 'red' as one of its properties — two separate, ordinary pieces of syntax that happen to sit next to each other.

Inline styles are especially powerful because the style prop is just a JavaScript object, which means state variables and ternary operators can be used directly inside the style declaration — no separate CSS class needed.

Something like style={{ backgroundColor: isError ? 'red' : 'green', opacity: isFading ? 0.5 : 1 }} produces a UI element that reacts fluidly to state changes, recalculating its appearance on every render.

Inline styles are best for highly specific, dynamic values, like an exact progress bar percentage — but for larger stylistic changes, dynamically toggling a className string is usually preferable to computing every property inline.

JavaScript template literals make this straightforward: something like className={btn ${isSelected ? 'btn-selected' : ''}} conditionally appends a class name based on a state variable, letting the actual visual rules live in CSS rather than inline JS objects.

For standard application-wide styling, a plain .css file can be imported directly at the top of a component file, like import './global.css'. This tells the bundler (Vite, Webpack, etc.) to include those styles in the final build.

The catch is that these class names are globally scoped by default — a class defined in one file's CSS can unintentionally collide with a same-named class used by an entirely different component elsewhere in the app.

CSS Modules solve the global-collision problem directly. Naming a file with a .module.css extension, like Button.module.css, tells React's build tooling to automatically generate a unique, locally scoped class name for every class defined in that file.

Instead of a plain string, the file is imported as an object — import styles from './Button.module.css' — and referenced by property, as in <button className={styles.primary}>, guaranteeing that class can't accidentally clash with one from another component.

Putting it together: className is the required replacement for class in JSX, inline style objects handle values that need to change dynamically based on state, and CSS Modules solve the naming-collision problem that plain global CSS imports create.

Choosing between them comes down to the situation — reach for className and CSS/CSS Modules for most static and reusable styling, and inline styles specifically for values computed at render time from component state.

Styling React. Welcome to React Styling. Building a React application is only half the battle; the other half is making it look incredible. In traditional HTML, you use the 'class' attribute and a separate CSS file. In React, because we are writing JSX (which compiles down to JavaScript), things work a bit differently. Today, we'll master the various techniques to style React applications, from basic class names to dynamic inline styles and scoped CSS modules.

The className Attribute. The most fundamental rule of React styling: NEVER use 'class'. 'class' is a reserved keyword in JavaScript (used for defining Object-Oriented classes). Because JSX is really just syntactic sugar for JavaScript functions, React requires you to use 'className' instead to avoid conflicts. Under the hood, React automatically translates 'className' back into a standard HTML 'class' attribute when it renders to the DOM.

Which attribute MUST you use in JSX to apply CSS classes to an element?

• →class
• →classList
• →className

Inline Styles Overview. Sometimes, importing an entire CSS file is overkill for a single specific style, especially if that style needs to change dynamically based on state. React supports inline styles via the style prop. However, instead of passing a CSS string like in standard HTML, you must pass a JavaScript object.

camelCase Properties. When defining an inline style object in React, there is a critical rule: all CSS properties that contain a hyphen (like background-color or font-size) MUST be converted to camelCase (backgroundColor and fontSize). This is because hyphens are not valid in standard JavaScript object property names without quotes.

How should the CSS property margin-top be written inside a React inline style object?

• →margin-top
• →marginTop

Double Curly Braces. You will often see inline styles written with double curly braces, like style={{ color: 'red' }}. This isn't a special JSX syntax; it's simply an object literal placed inside an interpolation block. The outer braces { } tell JSX we are injecting JavaScript, and the inner braces { } define the actual JavaScript object.

Dynamic Inline Styles. The true power of inline styles lies in their ability to be dynamic. Because the style prop takes a JavaScript object, you can use state variables and ternary operators directly within the style declaration to create fluid, interactive UI elements without touching CSS classes.

If isPrimary is a state boolean, how would you dynamically set the color property using a ternary operator inside an inline style?

• →{isPrimary ? 'blue' : 'gray'}
• →isPrimary ? 'blue' : 'gray'

Dynamic Class Names. While inline styles are good for highly specific, dynamic values (like a progress bar percentage), you should prefer dynamic className strings for larger stylistic changes. You can use JavaScript template literals (backticks) to conditionally inject class names based on state variables.

Global CSS Imports. For standard application-wide styling, you can simply import a standard .css file directly at the top of your React component file. This signals to your bundler (like Vite or Webpack) to include those styles in the final build. However, note that these classes become globally scoped and can conflict with other components.

CSS Modules. To solve the problem of global CSS collisions, React supports CSS Modules out of the box. If you name your file ending in .module.css, React will locally scope all class names automatically. You import the styles as an object, and reference them as properties.

If you want a CSS file to be locally scoped to prevent naming conflicts, what file extension pattern should you use?

• →local.css
• →module.css

Mastery Achieved. Styling mastery achieved! You now know how to build beautiful, dynamic interfaces using React. You understand why className is required, how to write JS objects for inline styles, and when to use template literals or CSS Modules for complex visual logic.