How does React handle inline style?

This task is covered in 2 stacks on this page: React, HTML & CSS. The "Inline Style Objects" snippet in React uses ` `.

Which code does the React example use?

The "Inline Style Objects" snippet uses ` `, from the JSX section of the React cheat sheet.

Which stacks cover "inline style" on this page?

React, HTML & CSS. Together they hold 3 copy-ready snippets for this task.

Inline style

3 snippets across 2 stacks - React, HTML & CSS

Also written as inline styles

REReact

Inline Style Objects

RE · JSX

Syntax

<div style={{ property: value }} />

Example

function ProgressBar({ percent }) {
  return (
    <div
      style={{
        width: `${percent}%`,
        height: "8px",
        backgroundColor: percent > 70 ? "#4caf50" : "#ff9800",
        borderRadius: "4px",
        transition: "width 0.3s ease",
      }}
    />
  );
}

Note Style properties use camelCase (backgroundColor, not background-color). Values that need units must include them as strings ("8px"), except for unitless properties like opacity and zIndex which accept numbers.

Inline Styles

RE · Styling

Syntax

<div style={{ cssProperty: value }} />

Example

function AlertBanner({ type, message }) {
  const styles = {
    padding: '12px 16px',
    borderRadius: '6px',
    fontWeight: 'bold',
    backgroundColor: type === 'error' ? '#fde8e8' : '#e8f5e9',
    color: type === 'error' ? '#c62828' : '#2e7d32',
    border: `1px solid ${type === 'error' ? '#ef9a9a' : '#a5d6a7'}`,
  };

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

Note Inline styles use camelCase property names and string/number values. They cannot handle pseudo-classes (:hover), media queries, or keyframe animations. Best for truly dynamic values that change at runtime.

HCHTML & CSS

<span> Inline Container

HC · Text Elements

Syntax

<span class="name">inline content</span>

Example

<p>Status: <span class="status-active">Active</span></p>

Note A span has no semantic meaning. Use it purely for styling a portion of text when no better semantic element exists.

Frequently asked questions

How does React handle inline style?: This task is covered in 2 stacks on this page: React, HTML & CSS. The "Inline Style Objects" snippet in React uses `<div style={{ property: value }} />`.
Which code does the React example use?: The "Inline Style Objects" snippet uses `<div style={{ property: value }} />`, from the JSX section of the React cheat sheet.
Which stacks cover "inline style" on this page?: React, HTML & CSS. Together they hold 3 copy-ready snippets for this task.
Is there anything to watch out for?: Yes. For "Inline Style Objects": Style properties use camelCase (backgroundColor, not background-color). Values that need units must include them as strings ("8px"), except for unitless properties like opacity and zIndex which accept numbers.