Adopting CSS-in-JS Approach
Learn about CSS-in-JS in React that enhances component design, offering a seamless integration of styles and JavaScript.
Introduction to styling in React
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>}
class is a reserved keyword for JavaScript and, therefore, can't be used. Instead, React chooses to use a different word, className.
Component design and styling challenges
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 ...