JSX STYLING /// CLASSNAME VS INLINE /// CAMELCASE OBJECTS /// DYNAMIC CSS /// JSX STYLING /// CLASSNAME VS INLINE /// CAMELCASE OBJECTS /// DYNAMIC CSS ///

React Styles

Understand how to apply CSS to your components. Learn the difference between global classes and component-specific inline objects.

StylingComponent.jsx
1/6
🎨

// Virtual Output

Styled with Class
> In React, we don't use the standard 'class' attribute. Instead, we use 'className' because 'class' is a reserved keyword in JavaScript.

The React Style Paradigm

In traditional HTML, we use the class attribute. However, React uses JSX, which is an extension of JavaScript. Since class is a reserved word in JS (for defining classes), React introduced className.

1. Inline Styles (The Object Way)

Inline styles in React are written as objects. This means property names are camelCased. For example, text-align becomes textAlign.

// Correct Syntax <div style={{ padding: '10px', marginTop: '20px' }}>Content</div>

2. Dynamic Classes

The true power of React styling comes from dynamic logic. We can use template literals to toggle classes based on the component's state.

<button className={`btn ${isError ? 'btn-red' : 'btn-green'}`}>Submit</button>

Styling Glossary

JSX

JavaScript XML. A syntax extension that allows writing HTML-like code inside JS.

camelCase

Writing phrases without spaces, where each word starts with a capital letter except the first (e.g., borderRadius).

Template Literals

Strings wrapped in backticks (`) that allow embedded expressions using ${}.

CSS Modules

A CSS file where all class names are scoped locally to the component by default.

Style Object

A JS object containing CSS properties used for the 'style' attribute in React.

Specificity

The means by which browsers decide which CSS property values are most relevant to an element.

Support Us