Add CSS-in-JS styles with emotion to a Next.js app

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.