React Inline Styles – web4learners.com

React allows you to apply CSS directly to JSX elements using the style attribute. This is commonly called inline styling.

In regular HTML, inline CSS is written as a string:

<div style="color: blue; font-size: 20px;">
  Hello React
</div>

In JSX, the style attribute works differently. Instead of passing a CSS string, React expects a JavaScript object containing CSS properties and their values.

<div style={{ color: "blue", fontSize: "20px" }}>
  Hello React
</div>

At first, the double curly braces can look confusing:

style={{ color: "blue" }}

The outer {} tells JSX that a JavaScript expression is being used.

The inner {} creates the JavaScript object containing the styles.

Once you understand this structure, React inline styles become straightforward.

What Are Inline Styles?

Inline styles are CSS styles applied directly to an individual HTML element rather than through a separate CSS class.

For example:

<h1 style={{ color: "blue" }}>
  React
</h1>

The browser receives the equivalent styling for that element.

Another example:

<button
  style={{
    backgroundColor: "blue",
    color: "white",
    padding: "10px 20px"
  }}
>
  Start Learning
</button>

Here, the styles are written directly inside JSX.

Inline styles can be useful when a style depends on JavaScript data or when a small amount of element-specific styling is required.

The Basic `style` Syntax

The basic syntax is:

<Element style={{ property: "value" }}>
  Content
</Element>

For example:

<p style={{ color: "red" }}>
  This is an important message.
</p>

The JavaScript object is:

{
  color: "red"
}

React uses that object to apply the styles to the element.

Why Are There Two Sets of Curly Braces?

This is one of the most common questions beginners have.

Consider:

<div style={{ color: "blue" }}>
  Hello
</div>

There are two {} pairs.

The first pair:

{
  ...
}

means:

“Evaluate this as JavaScript.”

The second pair:

{
  color: "blue"
}

is the JavaScript object.

So you can think of it as:

style={
  {
    color: "blue"
  }
}

The formatting above makes the structure easier to understand.

CSS Property Names in React

CSS normally uses kebab-case property names.

For example:

background-color
font-size
margin-top
border-radius

React style objects generally use JavaScript-style camelCase property names instead.

So:

CSS	React Style Object
`background-color`	`backgroundColor`
`font-size`	`fontSize`
`margin-top`	`marginTop`
`border-radius`	`borderRadius`
`text-align`	`textAlign`
`line-height`	`lineHeight`
`box-shadow`	`boxShadow`
`z-index`	`zIndex`

For example, CSS:

.card {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
}

can be represented as:

<div
  style={{
    backgroundColor: "white",
    borderRadius: "10px",
    padding: "20px"
  }}
>
  Card
</div>

Property Values Are Usually Strings or Numbers

Style values can be provided as strings.

<div
  style={{
    color: "blue",
    fontSize: "20px"
  }}
>
  React
</div>

Some numeric CSS properties can also be written as numbers.

<div
  style={{
    width: 300,
    height: 200
  }}
>
  Box
</div>

React can add appropriate units for certain numeric properties.

For example:

<div style={{ width: 300 }}>
  Box
</div>

can represent a width of 300px.

However, not every CSS property behaves this way. When a unit is important or a property expects a specific format, using a string is clearer.

For example:

<div style={{ width: "50%" }}>
  Box
</div>

or:

<div style={{ width: "20rem" }}>
  Box
</div>

Using `px`, `%`, `rem`, and Other Units

CSS units can be included inside strings.

<div
  style={{
    width: "50%",
    padding: "2rem",
    marginTop: "20px"
  }}
>
  Content
</div>

You can use many CSS units, including:

px
%
rem
em
vh
vw
vmin
vmax

For example:

<section
  style={{
    width: "80%",
    minHeight: "100vh",
    padding: "2rem"
  }}
>
  Content
</section>

Creating a Style Object

Instead of writing the style object directly inside JSX, you can store it in a variable.

const headingStyle = {
  color: "blue",
  fontSize: "32px",
  marginBottom: "20px"
};

Then:

<h1 style={headingStyle}>
  React Tutorial
</h1>

This can make the JSX easier to read.

The important difference is:

style={headingStyle}

not:

style="headingStyle"

Because headingStyle is a JavaScript variable.

Reusing a Style Object

A style object can be reused.

const buttonStyle = {
  padding: "10px 20px",
  borderRadius: "6px",
  fontSize: "16px"
};

function App() {
  return (
    <>
      <button style={buttonStyle}>
        Save
      </button>

      <button style={buttonStyle}>
        Submit
      </button>
    </>
  );
}

Both buttons receive the same styles.

This can be useful for small groups of related elements.

Dynamic Inline Styles

One of the main advantages of React inline styles is that JavaScript can control them.

For example:

const isActive = true;

<div
  style={{
    backgroundColor: isActive ? "blue" : "gray",
    color: "white"
  }}
>
  Profile
</div>

If isActive is true, the background is blue.

If it is false, the background becomes gray.

This allows styles to respond to application data.

Using Variables in Styles

Individual style values can come from variables.

const textColor = "green";
const fontSize = 24;

<h2
  style={{
    color: textColor,
    fontSize: fontSize
  }}
>
  React
</h2>

You can also use the shorter property syntax when the variable has the same name:

const fontSize = 24;

<h2 style={{ fontSize }}>
  React
</h2>

This is JavaScript object shorthand.

Calculating Style Values

Because styles are JavaScript objects, you can calculate values before applying them.

const baseSize = 20;

<p
  style={{
    fontSize: baseSize * 2
  }}
>
  React
</p>

You can also use calculations involving application data:

const progress = 75;

<div
  style={{
    width: `${progress}%`
  }}
>
  Progress
</div>

The resulting width is:

75%

This pattern is particularly useful for progress bars, charts, dynamic dimensions, and visual indicators.

Conditional Inline Styles

Styles can change based on conditions.

const isOnline = true;

<div
  style={{
    color: isOnline ? "green" : "gray"
  }}
>
  {isOnline ? "Online" : "Offline"}
</div>

You can apply multiple conditional properties:

const isDisabled = true;

<button
  style={{
    backgroundColor: isDisabled ? "gray" : "blue",
    color: "white",
    cursor: isDisabled ? "not-allowed" : "pointer"
  }}
>
  Submit
</button>

This makes inline styles useful for UI states.

Combining Static and Dynamic Styles

You can mix fixed values with dynamic values.

const isFeatured = true;

<div
  style={{
    padding: "20px",
    borderRadius: "10px",
    backgroundColor: isFeatured ? "gold" : "white",
    border: isFeatured ? "2px solid orange" : "1px solid gray"
  }}
>
  Featured Course
</div>

Some styles remain constant, while others depend on JavaScript.

Using React State with Inline Styles

Inline styles can respond to React state.

import { useState } from "react";

function ToggleBox() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <button onClick={() => setIsActive(!isActive)}>
        Toggle
      </button>

      <div
        style={{
          backgroundColor: isActive ? "blue" : "gray",
          color: "white",
          padding: "20px"
        }}
      >
        {isActive ? "Active" : "Inactive"}
      </div>
    </div>
  );
}

When the button is clicked, the state changes.

React renders the component again, and the style object receives the new values.

This creates a dynamic visual interface.

CSS Properties With Vendor Prefixes

Some CSS properties may require vendor prefixes in certain situations.

In React style objects, vendor-prefixed properties generally use JavaScript-style capitalization.

For example:

<div
  style={{
    WebkitUserSelect: "none"
  }}
>
  Content
</div>

The general pattern is that the first letter of a vendor prefix is capitalized, such as:

Webkit
Moz
ms

Most modern CSS does not require you to manually deal with vendor prefixes for common properties, but you may encounter them when working with specialized styling.

CSS Custom Properties

CSS custom properties, also known as CSS variables, use names such as:

--primary-color

These custom property names can be used with React’s style object.

<div
  style={{
    "--primary-color": "blue"
  }}
>
  React
</div>

You can then use the custom property through CSS:

.title {
  color: var(--primary-color);
}

For more complex styling systems, CSS variables can be a useful combination of CSS and JavaScript.

Using `style` With Components

The style prop can also be passed to your own React components.

function Card({ style }) {
  return (
    <div style={style}>
      Card Content
    </div>
  );
}

Then:

<Card
  style={{
    backgroundColor: "lightblue",
    padding: "20px"
  }}
/>

The component receives the style object through props.

Combining Default and Custom Styles

Suppose a component has its own default styles:

function Card({ style }) {
  const defaultStyle = {
    padding: "20px",
    borderRadius: "10px"
  };

  return (
    <div style={{ ...defaultStyle, ...style }}>
      Card Content
    </div>
  );
}

Now you can add custom styles:

<Card
  style={{
    backgroundColor: "white",
    border: "1px solid gray"
  }}
/>

The spread syntax combines the two objects.

The later properties can override earlier properties.

For example:

style={{
  ...defaultStyle,
  ...style
}}

means values from style can override matching values from defaultStyle.

Inline Styles Are Not the Same as CSS

Inline styles and CSS classes have different purposes.

With a CSS class:

<div className="card">
  React Course
</div>

the styles live in a CSS file:

.card {
  padding: 20px;
  border-radius: 10px;
}

With inline styling:

<div
  style={{
    padding: "20px",
    borderRadius: "10px"
  }}
>
  React Course
</div>

the styles live directly in the component.

Neither approach is universally better. The appropriate choice depends on the situation.

When Should You Use Inline Styles?

Inline styles can be useful when a value is highly dynamic.

For example, a progress bar:

const progress = 65;

<div
  style={{
    width: `${progress}%`
  }}
/>

Another example is a dynamic position:

const position = 120;

<div
  style={{
    left: `${position}px`
  }}
>
  Player
</div>

They can also be convenient for small, component-specific styling.

When Should You Prefer `className`?

For reusable and larger styling rules, CSS classes are often easier to maintain.

For example:

<div className="course-card">
  React Course
</div>

with:

.course-card {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

This keeps styling separate from component logic and makes the same design easier to reuse.

A useful general approach is:

Use className for reusable styling and inline style for values that need to be controlled dynamically by JavaScript.

Important Difference: Pseudo-Classes

Traditional inline styles cannot directly represent CSS pseudo-classes such as:

:hover
:focus
:active

For example, you cannot normally write:

<div
  style={{
    ":hover": {
      backgroundColor: "blue"
    }
  }}
>
  Hover Me
</div>

as ordinary React inline styling.

For hover, focus, media queries, and many other CSS features, regular CSS, CSS Modules, or a styling solution designed to support those features is generally more appropriate.

Common Mistakes

Using CSS Syntax Instead of JavaScript Syntax

Incorrect:

<div
  style={{
    background-color: "blue"
  }}
>
  React
</div>

Correct:

<div
  style={{
    backgroundColor: "blue"
  }}
>
  React
</div>

Passing a CSS String

In React JSX, this is not the normal form:

<div style="color: red;">
  React
</div>

Instead:

<div style={{ color: "red" }}>
  React
</div>

Forgetting the Object

Incorrect:

<div style={color: "red"}>
  React
</div>

Correct:

<div style={{ color: "red" }}>
  React
</div>

Using Hyphenated Property Names

Incorrect:

<div
  style={{
    font-size: "20px"
  }}
>
  React
</div>

Correct:

<div
  style={{
    fontSize: "20px"
  }}
>
  React
</div>

Forgetting Units When Necessary

For values that require a unit, provide one when appropriate:

<div style={{ width: "50%" }}>
  Content
</div>

rather than assuming every CSS property can use a bare number.

Putting Too Much CSS Into JSX

Avoid creating extremely large style objects directly inside JSX.

Instead of:

<div
  style={{
    color: "white",
    backgroundColor: "blue",
    padding: "20px",
    margin: "20px",
    borderRadius: "10px",
    fontSize: "18px",
    fontWeight: "bold",
    textAlign: "center"
  }}
>
  Content
</div>

consider using a CSS class when those styles are reusable:

<div className="card">
  Content
</div>

A Practical Example

Let’s create a simple React notification whose appearance changes based on its status.

function Notification({ status, message }) {
  const styles = {
    padding: "16px 20px",
    borderRadius: "8px",
    color: "white",
    backgroundColor:
      status === "success"
        ? "green"
        : status === "error"
        ? "red"
        : "orange"
  };

  return (
    <div style={styles}>
      {message}
    </div>
  );
}

You can use it like this:

<Notification
  status="success"
  message="Your account was created successfully."
/>

Or:

<Notification
  status="error"
  message="Something went wrong."
/>

The same component uses different styles depending on the value of status.

A Dynamic Progress Bar Example

Inline styles are especially useful for values such as percentages.

function ProgressBar({ progress }) {
  return (
    <div
      style={{
        width: "100%",
        height: "20px",
        backgroundColor: "#ddd",
        borderRadius: "10px"
      }}
    >
      <div
        style={{
          width: `${progress}%`,
          height: "100%",
          backgroundColor: "blue",
          borderRadius: "10px"
        }}
      />
    </div>
  );
}

Use it like this:

<ProgressBar progress={75} />

The inner element receives:

width: 75%

If you change:

<ProgressBar progress={40} />

the width automatically becomes:

40%

This is a good example of where JavaScript-controlled styling is genuinely useful.

Inline Styles Cheat Sheet

Purpose	JSX
Single style	`style={{ color: "red" }}`
Multiple styles	`style={{ color: "red", padding: "20px" }}`
Variable	`style={styles}`
Dynamic value	`style={{ width:` ${progress}% `}}`
Conditional value	`style={{ color: isActive ? "blue" : "gray" }}`
CSS camelCase	`backgroundColor`
CSS custom property	`style={{ "--theme": "blue" }}`
Component style prop	`<Card style={styles} />`
Merge styles	`style={{ ...defaultStyle, ...customStyle }}`

Practice Exercise

Create a ProfileCard component with a dynamic theme.

The component should receive:

<ProfileCard
  name="Arafat"
  role="Frontend Developer"
  isOnline={true}
/>

Your component should:

Display the person’s name.
Display their role.
Show "Online" or "Offline".
Use green text when the person is online.
Use gray text when the person is offline.
Give the card padding and rounded corners.
Change the background based on the online status.
Use inline styles rather than a CSS class.

Try creating the component yourself before looking at a solution.

Where to Place an Image

Place this image after the section “Why Are There Two Sets of Curly Braces?”

Create a 16:9 educational React infographic showing:

JSX

<div
  style={{
    color: "blue",
    fontSize: "20px"
  }}
>
  React
</div>

        ↓

style prop
        ↓
JavaScript object
        ↓
CSS properties

Visually highlight the two levels of curly braces and show the transformation from JSX to styling. Use a polished modern coding-editor aesthetic with React-inspired developer visuals.

Caption: Understanding the style object and double curly braces in React

Alt text: React inline styles using the style prop and a JavaScript object

Key Takeaways

React supports inline styling through the style prop.
React expects a JavaScript object for inline styles.
The basic syntax is style={{ property: "value" }}.
The outer curly braces enter JavaScript expression mode.
The inner curly braces create the JavaScript style object.
CSS property names generally use camelCase in React style objects.
For example, background-color becomes backgroundColor.
Dynamic values can come from variables, calculations, conditions, and state.
CSS units such as %, rem, and vh can be supplied as strings.
Inline styles can be passed to custom components through the style prop.
Style objects can be combined using the JavaScript spread operator.
Inline styles are useful for dynamic values such as progress, position, size, and state-based styling.
className is generally a better choice for larger reusable styling rules.
Regular CSS is still useful for features such as pseudo-classes, media queries, and complex styling.
Choosing between className and inline styles depends on whether the styling is primarily reusable CSS or dynamic JavaScript-driven values.

The key idea to remember is simple:

style={{ color: "blue" }}

The style prop receives a JavaScript object, not a traditional CSS string. Once you understand that difference, you can use JavaScript to control styles dynamically throughout your React application.

What Are Inline Styles?

The Basic style Syntax

Why Are There Two Sets of Curly Braces?

CSS Property Names in React

Property Values Are Usually Strings or Numbers

Using px, %, rem, and Other Units

Creating a Style Object

Reusing a Style Object

Dynamic Inline Styles

Using Variables in Styles

Calculating Style Values

Conditional Inline Styles

Combining Static and Dynamic Styles

Using React State with Inline Styles

CSS Properties With Vendor Prefixes

CSS Custom Properties

Using style With Components

Combining Default and Custom Styles

Inline Styles Are Not the Same as CSS

When Should You Use Inline Styles?

When Should You Prefer className?

Important Difference: Pseudo-Classes

Common Mistakes

Using CSS Syntax Instead of JavaScript Syntax

Passing a CSS String

Forgetting the Object

Using Hyphenated Property Names

Forgetting Units When Necessary

Putting Too Much CSS Into JSX

A Practical Example

A Dynamic Progress Bar Example

Inline Styles Cheat Sheet

Practice Exercise

Where to Place an Image

Key Takeaways

The Basic `style` Syntax

Using `px`, `%`, `rem`, and Other Units

Using `style` With Components

When Should You Prefer `className`?