Style Your Next.js App with Global CSS, CSS Modules, and CSS-In-JS
There is a plethora of options when it comes to styling your Next.js app. Global CSS, component level CSS, CSS-in-JS, or some kind of CSS framework. In this lesson, we are going to be focusing on the first three.
Creating a global CSS file is as simple as create a file called global.css under the root styles directory and importing it into your App component.
CSS on the component level is accomplished using CSS modules. To do this you can create a CSS file on the same level as the component and give it the same filename but the .module.css extension instead of .tsx. Then you can import this into your component and use it as styles.
CSS-in-JS is done by using a style prop inline in your TSX and defining CSS with the object + camelCase syntax.
Instructor: [0:00] Every website needs its own custom styling, and Next.js makes no exceptions in that. There are several ways to achieve custom styles by adding a global style sheet, component level CSS, CSS in JS, or use a UI framework, but we'll cover that in a separate lesson.
[0:20] In this lesson, we're going to focus on the first three. Let's start by adding a global style sheet. Let's open exercise number nine, open the Styles folder, and the globals.css file. We can see that in this style sheet, we are adding some basic styling to the body element.
[0:39] To apply these styles, we need to import this CSS file into the App component. Let's open up the Pages directory and the _app.tsx. To import that CSS file, we just need to do import and the relative path to the file. We'll go up one level, Styles, and then globals.css.
[1:03] Let's run the app and make sure that the styles are applied. We'll do npm run dev. Let's open up inspect element and click on the body element. On the right side in the styles tab, we can see that the styles that we defined in the globals.css are applied to the body element.
[1:26] Since we imported the CSS file into the app component, those styles will get applied on every page. That's how we can use global styles. Next, let's see how we can use the component-level CSS method.
[1:40] Another way of achieving custom styles is using CSS modules, which Next.js has support for. Let's say, we have a reusable button component in the sources directory, components, button, and the button.tsx file.
[1:55] To create the CSS module for this component, we need to create a new CSS file into the button directory, right next to the button.tsx file. We should name it, button.module.css.
[2:08] The fact that the CSS file is right next to the component file, and the CSS file name is exactly like the component file name, but ends with .module.css, Next.js will treat this as a CSS module. Let's create a simple CSS class. We'll call it error.
[2:26] Let's set the color to white and the background color to red. In order to use this class into our component, we need to go back to the button.tsx file, and first import the styles, but this time we will import styles from button.module.css.
[2:49] The styles in this case represents an object that holds all of our CSS classes inside of that style sheet. In order to apply it to the button, we can use the class name prop, and set the class name to styles.error.
[3:06] Let's save this file and check out the login button. We can see right off the bat that the button is red with white text. If we inspect it, we can see that it has a custom generated class name, which in this case is button_error, and then some sort of ID.
[3:26] This means that Next.js recognized the style sheet as a CSS module and generated that class for us. We can also see that the styles that we wrote are contained within that class. This is how we do CSS modules in Next.js. Lastly, let's see the CSS-in-JS method. Next.js also comes with a built-in CSS-in-JS support.
[3:52] The simplest way to do CSS-in-JS in Next.js is by doing inline styles. Let's go to the index page into the pages directory and focus on the first div. We'll apply styles using the CSS-in-JS support, we can use the style prop. The style prop receives an object with style definitions, but in CSS-in-JS syntax.
[4:18] Let's set the display to flex, flex direction to row, the row gap to 24 pixels, the justify content space between, and the aligned items to sender. Let's save this and see what we get. We can see that the layout has changed.
[4:51] If we focus on the first div, we can see that those styles are translated into CSS and are in lined to the div that we edited. Awesome, that's about it. That's how we can use CSS-in-JS in Next.js. Let's recap. First, we learnt about the global style sheets method, where we have a CSS file just like this one and we wanted to apply it to every page.
[5:15] We simply imported it into the app component file and the changes got applied immediately. Then, we learnt about the CSS modules method, where we created a CSS file with the same name as the component file that ended in .module.css.
[5:31] We have imported this file in the component file itself, but imported it just like we import an ordinary package. The styles, in this case, represented an object that had all of our classes inside of that CSS module.
[5:46] The last method that we learned was the CSS-in-JS. We learned that we can inline the CSS by using the style prop, and provide an object with our style definition using CSS-in-JS syntax. These styles got compiled into ordinary CSS and applied back to the div.