Style Your Next.js App with Global CSS, CSS Modules, and CSS-In-JS

InstructorLazar Nikolov

Share this video with your friends

Send Tweet

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.

macmillan78
~ 2 years ago

In my understanding what explained here as CSS-in-JS is just inline styles. Doesn't CSS-in-JS mean something different?

Zac Jones
~ 2 years ago

@macmillan78, in this case CSS-in-JS is just inline styles using JavaScript object notation but there is quite a lot more that you can do with CSS-in-JS. Here's an article that you can explore that dives deep into the topic: https://css-tricks.com/a-thorough-analysis-of-css-in-js/