Using CSS-in-JS

In this section, we start by understanding CSS-in-JS and its benefits. We will then refactor the alert component we have used to implement CSS-in-JS and observe how it differs from CSS modules.

Understanding CSS-in-JS

CSS-in-JS isn’t a browser feature, and it isn’t even a specific library – instead, it is a type of library. Popular examples of CSS-in-JS libraries are styled-components and Emotion. There isn’t a significant difference between styled-components and Emotion – they are both popular and have similar APIs. We will use Emotion in this chapter.

Emotion generates styles that are scoped, similar to CSS modules. However, you write the CSS in JavaScript rather than in a CSS file – hence the name CSS-in-JS. In fact, you can write the CSS directly on JSX elements as follows:

<span
  css={css`
    font-weight: 700;
    font-size: 14;
  `}
>
 ...