Introduction

In this lesson, we’ll look at using Styled Components in React.

Styled Components is an example of a CSS-in-JS library, where JavaScript is used to style components. Tagged template literals are used to apply styles in the library.

Similar to CSS Modules, Styled Components results in local rather than global styles, though the library does provide for global styles as well as theming. Both are covered in the video lesson.

To install the Styled Components package run:

npm install styled-components

Video Lesson

Lesson Task

Brief

In this task you will practise styling a React app using Styled Components.

Download the XD file from this repo.

Process

Use Create React App and Styled Components to create a React app for the design.

Example answer

You can find an example solution in the answer branch of the repo.

Resources

Tags: