Inline Styling

Introduction

So far you have styled components using separate CSS files, whether plain or scoped with CSS Modules. React also supports a third approach that skips CSS files entirely: passing a JavaScript object directly to an element's style prop.

Inline styles are not meant to replace CSS files for most of your styling — they are a targeted tool for one specific situation: values that need to be computed at runtime. This lesson covers exactly how the style prop works, its JavaScript-flavored syntax, and where it genuinely shines versus where a CSS file is still the better choice.

The style Prop

Every DOM element that React renders accepts a style prop. Unlike plain HTML, where style="color: red;" is a string, React's style prop takes a JavaScript object whose keys are CSS property names and whose values are the corresponding CSS values.

function Alert() {
  return (
    <div style={{ backgroundColor: '#fee2e2', color: '#991b1b', padding: '12px' }}>
      Something went wrong.
    </div>
  );
}

export default Alert;

The double curly braces often confuse beginners: the outer {} is JSX syntax for embedding a JavaScript expression, and the inner {} is the actual object literal being passed as that expression's value.

camelCase Property Names

Regular CSS properties use hyphens, like background-color or font-size. Because hyphens are not valid in JavaScript object keys without quoting them, React style objects use the camelCase equivalent instead: backgroundColor, fontSize, and so on.

const cardStyle = {
  backgroundColor: '#f9fafb',
  borderRadius: '8px',
  fontSize: '1rem',
  textAlign: 'center',
};

function Card() {
  return <div style={cardStyle}>Hello!</div>;
}

Values: Strings vs Numbers

Most style values are written as strings, exactly as you would write them in CSS: '16px', '1px solid #ccc', 'center'. For a handful of properties that represent a length, React is a bit more forgiving — you can pass a plain number, and React automatically appends "px" for you.

const boxStyle = {
  width: 200,          // becomes '200px'
  padding: 16,          // becomes '16px'
  opacity: 0.8,         // stays 0.8 (no unit — unitless property)
  border: '1px solid #ccc', // must stay a string
};

When Inline Styles Are Useful

Inline styles earn their place when a value genuinely depends on data available only at render time — something a static CSS file cannot express on its own.

Where Inline Styles Fall Short

Inline styles operate only on the single element they are attached to, using only the properties you explicitly set. Several common CSS features simply have no equivalent through the style prop.

Example: A Dynamic Progress Bar

A progress bar is a textbook case for inline styles — the width is a genuinely dynamic value that depends on a prop, so it cannot live in a static CSS file.

function ProgressBar({ percent }) {
  const trackStyle = {
    backgroundColor: '#e5e7eb',
    borderRadius: '9999px',
    height: 10,
    width: '100%',
  };

  const fillStyle = {
    backgroundColor: '#4f46e5',
    borderRadius: '9999px',
    height: '100%',
    width: `${percent}%`,
  };

  return (
    <div style={trackStyle}>
      <div style={fillStyle} />
    </div>
  );
}

export default ProgressBar;

Renders a rounded track with a filled portion covering 65% of its width.

Notice the static parts (colors, border radius) could just as easily live in a CSS Module class, while only the dynamic width truly needs to be inline. Many real components mix both: a CSS class for the static look and a small inline style for the one computed value.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Inline styling gives you a direct, JavaScript-native way to style a single element, best reserved for values that genuinely depend on data available only at render time. For everything static and reusable, a CSS file or CSS Module remains the better tool.

Next, you will look at Bootstrap, a popular utility and component framework, and see how its ready-made classes can be applied directly inside your JSX.