Styling with the Style Attribute

Explore how to apply styles to React components using the style attribute. Learn to write styles as JavaScript objects with correct camelCase properties and when to use pixel units or omit them. This lesson helps you grasp inline styling fundamentals useful when dynamic styling depends on component state.

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 ...

1.Introduction

2.Introduction to ES2015+

3.JSX – an Introduction

4.Rendering of Elements and Components in React

5.State and Lifecycle Methods

6.Event Handling

7.Forms

8.Lists, Fragments, and Conditional Rendering

9.CSS and Styling

10.Higher Order Components

11.Functions as a Child and Render Props

12.Context API

13.Refs

14.Error Boundaries

15.Portals

16.Code Splitting

17.Typechecking with PropTypes, Flow, and TypeScript

18.React Hooks – an Introduction

19.Hooks in Action

20.The Hooks API

21.Routing in React

22.State Management

23.Internationalization

24.Conclusion

25.Appendix

Styling with the Style Attribute

Declaring style attributes