Styling with the Style Attribute

Learn how to apply inline styling to React components.

We'll cover the following

Declaring style attributes

Code example with px
Code example with no px

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 1200+ tech skills courses.

Introduction

Introduction to ES2015+

JSX – an Introduction

Rendering of Elements and Components in React

State and Lifecycle Methods

Event Handling

Forms

Lists, Fragments, and Conditional Rendering

CSS and Styling

Higher Order Components

Functions as a Child and Render Props

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Conclusion

Appendix

Styling with the Style Attribute

Declaring style attributes

Code example with `px`

Introduction

Introduction to ES2015+

JSX – an Introduction

Rendering of Elements and Components in React

State and Lifecycle Methods

Event Handling

Forms

Lists, Fragments, and Conditional Rendering

CSS and Styling

Higher Order Components

Functions as a Child and Render Props

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Conclusion

Appendix

Styling with the Style Attribute

Declaring style attributes

Code example with px

Code example with `px`