Key Concepts

Review core concepts you need to learn to master this subject

React CSS Styles

Style Names And Values

Presentational and Container Components

Static Property

.isRequired

Type Checking

Controlled vs. Uncontrolled Form Fields

Controlled Components

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
    Advanced React Techniques
    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 …
    Start
  2. 2
    Inline Styles
    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…
    Start
  3. 3
    Make A Style Object Variable
    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…
    Start
  4. 4
    Style Name Syntax
    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…
    Start
  5. 5
    Style Value Syntax
    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 …
    Start
  6. 6
    Share Styles Across Multiple Components
    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…
    Start

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