Learn React with TypeScript - Second Edition

5

Approaches to Styling React Frontends

In this chapter, we will style the alert component we worked on in previous chapters using four different approaches. First, we will use plain CSS and understand the downsides of this approach. Then, we will move on to use CSS modules, which will resolve plain CSS’s main problem. We will then use a CSS-in-JS library called Emotion and a library called Tailwind CSS and will understand the benefits of each of these libraries.

We will also learn how to use SVGs in React apps and use them in the alert component for the information and warning icons.

We’ll cover the following topics:

• Using plain CSS
• Using CSS modules
• Using CSS-in-JS
• Using Tailwind CSS
• Using SVGs

Technical requirements

We will use the following ...