Styling with the Style Attribute

Learn how to apply inline styling to React components.

The simplest way to style components in React is using the style attribute on regular HTML elements. It differs from regular HTML though. React components expect an object in the form of:

property: value

Declaring style attributes

The property itself needs to be declared in JavaScript (not its regular CSS counterpart) form, meaning:

  • zIndex instead of z-index
  • backgroundColor instead of background-color
  • marginTop instead of margin-top.

Code example with px

If the values accept declarations in pixels, it is optional to define px as the corresponding unit explicitly:

Get hands-on with 1400+ tech skills courses.