Inline Styles and Style Objects0%

Inline Styles and Style Objects

Beginner12 min read•Updated: Jul 11, 2026

Study Materials Cheatsheet

Inline Styles and Style Objects

1. Inline Styles in React

In traditional HTML, inline styles are declared as semicolon-delimited text strings:

HTML

1<div style="background-color: navy; color: white; padding: 12px;">
2  Standard HTML
3</div>

In React JSX, inline styles are passed as JavaScript objects.

This gives styles the full power of JavaScript: dynamic variables, ternary operators, and computed calculations can be seamlessly blended into your component presentation.

JSX

1import React from 'react';
2 
3export default function ProgressBar({ percentage }) {
// Style object defined as a JavaScript variable
const containerStyle = {
  height: '16px',
  width: '100%',
  backgroundColor: '#e2e8f0',
  borderRadius: '8px',
  overflow: 'hidden'
};
12 
const fillStyle = {
  height: '100%',
  width: `${percentage}%`,
  backgroundColor: percentage >= 100 ? '#10b981' : '#3b82f6',
  transition: 'width 0.3s ease-in-out'
};
19 
return (
  <div style={containerStyle}>
    <div style={fillStyle} />
  </div>
);
25}

2. Converting CSS Properties to camelCase

Because property keys in JavaScript objects cannot contain hyphens without being wrapped in quotes, React converts CSS property names to camelCase:

Standard CSS	React JSX Style Key
`background-color`	`backgroundColor`
`font-size`	`fontSize`
`margin-top`	`marginTop`
`border-radius`	`borderRadius`
`z-index`	`zIndex`
`box-shadow`	`boxShadow`

3. Automatic Pixel Units for Numbers

When passing numeric values to dimension properties (such as width, height, margin, padding, fontSize), React automatically appends the 'px' suffix for you:

JSX

1// React automatically appends 'px' to numbers for dimension properties:
2<div style={{ width: 300, height: 150, padding: 20 }}>
3  Box with automatic px units (width: 300px, height: 150px, padding: 20px)
4</div>
5 
6// For unitless properties like zIndex, opacity, or flex, React leaves them as unitless numbers:
7<div style={{ opacity: 0.8, zIndex: 10, flex: 1 }}>
8  Unitless properties remain unchanged
9</div>
10 
11// For other units (% , rem, em, vh), you must pass a string:
12<div style={{ width: '50%', fontSize: '1.25rem', height: '100vh' }}>
13  Explicit string units
14</div>

4. Pros and Cons of Inline Styles

Pros:

Scoped to the element: Zero risk of style name collisions with other components.
Dynamic Values: Ideal for styles driven by runtime data (e.g. progress bars, dynamic coordinates, drag-and-drop offsets).

Cons:

No Pseudo-classes or Pseudo-elements: Inline styles cannot define :hover, :focus, :active, ::before, or ::after.
No Media Queries: Responsive breakpoints (@media (max-width: 768px)) cannot be written in inline style objects.
Performance: Creating new style objects on every render creates minor garbage collection overhead compared to static CSS class names.

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

How are CSS property names written inside React style objects?

Question 2

What unit does React automatically append when a number is passed to a dimension property like width: 250?

Question 3

Which CSS features CANNOT be implemented using standard React inline styles?

Question 4

Why are inline styles ideal for a dynamic progress bar or drag-and-drop position?

Question 5

How do you specify percentages or rem units in an inline style object?

Next Lesson

CSS Stylesheets and Global Class Names

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Cleanup Functions in useEffect	CSS Stylesheets and Global Class Names

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext