Key Concepts

Review core concepts you need to learn to master this subject

React CSS Styles

// Passing the styles as an object const color = { color: 'blue', background: 'sky' }; <h1 style={color}>Hello</h1> // Passing the styles with an inline object, as a shorthand <h1 style={{ color: 'red' }}>I am red!</h1>

React supports inline CSS styles for elements. Styles are supplied as a style prop with a JavaScript object.

Style
Lesson 1 of 4
  1. 1
    In this unit, you will learn a variety of useful techniques that React programmers are expected to know. You’ll learn how to make a propType, how to write a form, and how to use styles. You’ll …
  2. 2
    There are many different ways to use styles in React. This lesson is focused on one of them: inline styles. An inline style is a style that’s written as an attribute, like this: Hello world…
  3. 3
    That’s all that you need to apply basic styles in React! Simple and straightforward. One problem with this approach is that it becomes obnoxious if you want to use more than just a few styles. A…
  4. 4
    In regular JavaScript, style names are written in hyphenated-lowercase: const styles = { ‘margin-top’: ‘20px’, ‘background-color’: ‘green’ }; In React, those same names are instead written i…
  5. 5
    In the last exercise, you learned how style names are slightly different in React than they are in regular JavaScript. In this exercise, you will learn how style values are slightly different …
  6. 6
    What if you want to reuse styles for several different components? One way to make styles reusable is to keep them in a separate JavaScript file. This file should export the styles that you w…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo