Add CSS-in-JS styles with emotion to a Next.js app
Next.js supports a large number of ways to style our app - in this quick lesson we're going to learn how to use emotion to add styles to our components.
Tomasz Łakomy: [0:00] We would like to be able to use CSS in JS styling for elements such as main, this header, and all of the other components that we're going to have on our site. In order to do that, we are going to use emotion.
[0:11] First up, open up the terminal, and I'm going to install @emotion/core and @emotion/styled. Next up, we're going to import styled from "@emotion/styled". For the record, there are multiple ways of styling components with emotion. I just happen to personally prefer a styled component.
[0:29] Let me start by creating a bunch of site components. I'm going to create a Container, which is going to be a styled.div. Is going to be empty for now. Next up, I'm going to create a Main, which is going to be a styled.main, and also a BlogTitle, which is going to be a styled.h1.
[0:45] With all of that in place, let me replace this div with a container. I have to scroll down over here and change it here as well. Next up, I'm going to use this main instead of this one. I'm going to use the BlogTitle instead of this h1. Let me grab all those styles that we had before.
[1:01] I'm going to copy those for the Container. I'm going to get those styles for Main, and I'm going to get those styles for the title. Let me add some spacing, and I'm going to delete all of those styles. Let me select this entire style tag and hit Delete.
[1:17] Now, our site is styled with CSS in JS with emotion. For instance, if I were to change this BlogTitle to have a color: red and a text-align: center, after I save the file, this change is going to be applied immediately.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!