How to Add Inline Style in JSX in React

In JSX, you add inline styles by passing a JavaScript object to the style attribute, where CSS properties are camelCased and values are strings or numbers. For example, <div style={{ backgroundColor: 'red', fontSize: '16px' }}> applies styles directly to the element.

Syntax

Inline styles in JSX use a JavaScript object inside double curly braces. The outer braces indicate JavaScript expression, and the inner braces define the object. CSS property names use camelCase instead of kebab-case, and values are usually strings with units or numbers for unitless properties.

• style={{ propertyName: value }}
• Use camelCase for CSS properties (e.g., backgroundColor)
• Values are strings (e.g., '10px') or numbers (e.g., 1 for opacity)

jsx

<div style={{ backgroundColor: 'blue', fontSize: '14px' }}>Styled Text</div>

Output

A div with blue background and 14px font size showing 'Styled Text'

Example

This example shows a React functional component that uses inline styles to color text and add spacing. It demonstrates how to write the style object and apply it directly to JSX elements.

jsx

import React from 'react';

export default function InlineStyleExample() {
  const style = {
    color: 'green',
    padding: '10px',
    border: '2px solid black',
    borderRadius: '5px'
  };

  return (
    <div style={style}>
      This text is green with padding and a border.
    </div>
  );
}

Output

A div with green text, 10px padding, black border with rounded corners, showing the text: 'This text is green with padding and a border.'

Common Pitfalls

Common mistakes when adding inline styles in JSX include:

• Using quotes around the entire style attribute instead of curly braces (wrong: style="color: red;")
• Using CSS property names with dashes instead of camelCase (wrong: font-size instead of fontSize)
• Forgetting to wrap the style object in double curly braces
• Using numbers without units for properties that require units (e.g., fontSize: 12 instead of fontSize: '12px')

Correct usage example:

jsx

// Wrong way:
<div style="font-size: 12px; color: red;">Wrong Style</div>

// Right way:
<div style={{ fontSize: '12px', color: 'red' }}>Correct Style</div>

Output

The first div will not style correctly; the second div will show red text with 12px font size.

Quick Reference

Concept	Example	Notes
Style attribute	style={{ color: 'blue' }}	Use double curly braces for JS object
CSS property naming	backgroundColor	CamelCase instead of kebab-case
Value types	'16px' or 16	Strings with units or numbers for unitless properties
Multiple styles	style={{ marginTop: '10px', fontWeight: 'bold' }}	Separate properties with commas
No quotes around style	style={{ color: 'red' }}	Do not use quotes around the whole style attribute

Key Takeaways

Use double curly braces to pass a JavaScript object to the style attribute in JSX.

Write CSS property names in camelCase, not kebab-case.

Provide style values as strings with units or numbers for unitless properties.

Avoid quotes around the entire style attribute; use curly braces instead.

Inline styles apply directly to the element and override external CSS.