Adopting CSS-in-JS approach

When we build an application in React, at one point, we need to find a way to apply CSS styles to our code, right? If you have CSS experience in the past, one approach we're familiar with is to use CSS classes to style styles. Consider the following CSS snippet stored in a file with a .css extension:

h1 {
  color: red;
}

We can apply this style to a React element via a prop called className:

const Title = () => {
  return <h1 className="title">Hello</h1>
}

Note

class is a reserved keyword for JavaScript and therefore can't be used. Instead, React chooses to use a different word, className.

Though this old method continues to work, there's one issue about the uniqueness of the title class. CSS can be applied to all the title elements on the screen, but it can't skip an element inside a component that we don't want to be styled. From the CSS perspective, the title class...