Styling Components with Emotion

Learn to use the Emotion library while styling the app's web page.

We'll cover the following

In this section, we’re going to style the App, Header, and HomePage components with a popular CSS-in-JS library called Emotion. Along the way, we will discover the benefits of CSS-in-JS over CSS modules. Installing EmotionInstallingEmotion.

Styling the App component

Let’s style the App component with Emotion by carrying out the following steps:

  1. Start by removing the App.module.css file by right-clicking on it and selecting the “Delete” option.

  2. In App.tsx, remove the line that says import styles from ./App.module.css.

  3. Remove the React import statement from App.tsx.

Note: In React 17 and beyond, it is no longer necessary to include the React import statement to render JSX, as is the case in App.tsx. However, the React import statement is still required if we want to use functions from the library, such as useState and useEffect.

  1. Add the following imports from the Emotion library at the top of App.tsx:

Get hands-on with 1200+ tech skills courses.