Chapter 4: Styling React Components with Emotion

In this chapter, we will style the Q&A app we have built so far with a popular CSS-in-JS library called Emotion. We will start by understanding how you can style components with plain CSS and its drawbacks. Next, we will move on to understanding how CSS-in-JS addresses the problems that plain CSS has before installing Emotion. Finally, we will style components using Emotion's css prop before creating some reusable styled components.

We'll cover the following topics in this chapter:

  • Styling components with CSS
  • Styling components with CSS modules
  • Styling components with Emotion
  • Styling pseudo-classes and nested elements with Emotion
  • Creating a reusable styled component with Emotion
  • Completing the ...

Get ASP.NET Core 5 and React - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.