How to Use Inline Styles in React

Use inline styles in React when a component needs small, local visual changes without creating a separate CSS file. They work best for one-off spacing, dynamic colors, conditional sizing, and quick UI states.

What you’ll build or solve

You’ll learn how to use inline styles in React with JavaScript style objects. You’ll also know how to add dynamic values and avoid the most common JSX styling mistakes.

When this approach works best

This approach is the right choice when styles are tightly connected to component logic or props.

Common real-world scenarios include:

• Dynamic button colors
• Conditional spacing
• Width or height from props
• Quick prototypes
• Small state-based visual changes

This is a bad idea when the same styles repeat across many components or when hover, media queries, and complex selectors are needed. In those cases, CSS files or CSS Modules are usually cleaner.

Prerequisites

You only need:

• A React component
• Basic JSX knowledge
• Basic CSS knowledge

Step-by-step instructions

Step 1: Pass a JavaScript object to the style prop

In React, inline styles use a JavaScript object, not a CSS string.

function Badge() {
  return (
    <span style={{ padding: "8px", backgroundColor: "#eef4ff" }}>
      New
    </span>
  );
}

export default Badge;

Each CSS property becomes a JavaScript key, and most values stay as strings.

For numeric values, React automatically adds px for many properties.

function Card() {
  return (
    <div style={{ padding: 20, marginTop: 16 }}>
      Pro plan
    </div>
  );
}

What to look for:

• The style prop expects an object
• CSS property names use camelCase
• String values work for colors and custom units
• Numeric values often become pixel values automatically
• Inline styles are best for local component styling

Step 2: Move the style object outside the JSX when it gets longer

For readability, store the style object in a variable.

function Alert() {
  const alertStyle = {
    padding: "12px 16px",
    backgroundColor: "#fee2e2",
    color: "#991b1b",
    borderRadius: "8px"
  };

  return <div style={alertStyle}>Payment failed</div>;
}

export default Alert;

This makes the JSX cleaner and easier to scan.

Step 3: Use dynamic values for props and state-based styling

Inline styles are especially useful when values depend on props or component state.

function ProgressBar({ progress }) {
  return (
    <div
      style={{
        width: `${progress}%`,
        height: "12px",
        backgroundColor: "#0057ff"
      }}
    />
  );
}

export default ProgressBar;

You can also switch styles based on conditions.

function Status({ isActive }) {
  return (
    <p
      style={{
        color: isActive ? "green" : "gray"
      }}
    >
      Account status
    </p>
  );
}

export default Status;

What to look for:

• Inline styles work well with props and state
• Template strings help with percentage values
• Ternaries are useful for conditional colors or sizing
• Keep dynamic style logic simple
• Move complex conditions into variables when needed

Examples you can copy

Simple inline style

function Title() {
  return <h1 style={{ color: "#111827", marginBottom: "16px" }}>Dashboard</h1>;
}

Numeric spacing values

function Box() {
  return <div style={{ padding: 24, borderRadius: 12 }}>Content</div>;
}

Dynamic background color

function Button({ isPrimary }) {
  return (
    <button
      style={{
        backgroundColor: isPrimary ? "#0057ff" : "#e5e7eb",
        color: isPrimary ? "white" : "#111827"
      }}
    >
      Save
    </button>
  );
}

Common mistakes and how to fix them

Mistake 1: Using a CSS string instead of an object

What the reader might do:

function Notice() {
  return <p style="color: red;">Error</p>;
}

Why it breaks: React expects the style prop to receive a JavaScript object.

Corrected approach:

function Notice() {
  return <p style={{ color: "red" }}>Error</p>;
}

Mistake 2: Writing CSS property names with hyphens

What the reader might do:

function Box() {
  return <div style={{ "background-color": "blue" }}>Box</div>;
}

Why it breaks: inline style keys should use JavaScript-style camelCase names.

Corrected approach:

function Box() {
  return <div style={{ backgroundColor: "blue" }}>Box</div>;
}

Mistake 3: Using inline styles for hover or media query logic

What the reader might do:

Try to handle :hover or responsive breakpoints directly inside the inline style object.

Why it breaks: inline styles do not support normal CSS selectors or media queries.

Corrected approach:

Use a CSS file, CSS Module, or a styling library when hover states and responsive rules are needed.

Troubleshooting

If the style does not apply, confirm the style prop receives a JavaScript object wrapped in curly braces.

If the property name looks correct but still fails, switch from kebab-case to camelCase.

If dynamic values do not work, check that the expression returns the correct string or number.

If the component needs hover, focus, or media query styling, move those rules into CSS instead of inline styles.

Quick recap

• Use the style prop with a JavaScript object
• Write CSS property names in camelCase
• Use strings for colors and custom units
• Use numbers for many pixel-based values
• Use inline styles for small local or dynamic styling