How do we style React components in Next.js?

We have a lot of freedom, because we can use whatever library we prefer.

But Next.js comes with styled-jsx built-in, because that’s a library built by the same people working on Next.js.

And it’s a pretty cool library that provides us scoped CSS, which is great for maintainability because the CSS is only affecting the component it’s applied to.

I think this is a great approach at writing CSS, without the need to apply additional libraries or preprocessors that add complexity.

To add CSS to a React component in Next.js we insert it inside a snippet in the JSX, which start with

<style jsx>{`

and ends with

`}</style>

Inside this weird blocks we write plain CSS, as we’d do in a .css file:

<style jsx>{`
  h1 {
    font-size: 3rem;
  }
`}</style>

You write it inside the JSX, like this:

const Index = () => (
  <div>
		<h1>Home page</h1>

		<style jsx>{`
		  h1 {
		    font-size: 3rem;
		  }
		`}</style>
  </div>
)

export default Index

Inside the block we can use interpolation to dynamically change the values. For example here we assume a size prop is being passed by the parent component, and we use it in the styled-jsx block:

const Index = props => (
  <div>
		<h1>Home page</h1>

		<style jsx>{`
		  h1 {
		    font-size: ${props.size}rem;
		  }
		`}</style>
  </div>
)

If you want to apply some CSS globally, not scoped to a component, you add the global keyword to the style tag:

<style jsx global>{`
body {
  margin: 0;
}
`}</style>

If you want to import an external CSS file in a Next.js component, you have to first install @zeit/next-css:

npm install @zeit/next-css

and then create a configuration file in the root of the project, called next.config.js, with this content:

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

After restarting the Next app, you can now import CSS like you normally do with JavaScript libraries or components:

import '../style.css'

You can also import a SASS file directly, using the @zeit/next-sass library instead.

Lessons in this unit:

0:	Introduction
1:	Getting started with Next.js (Pages Router), a tutorial
2:	How to install Next.js
3:	How I set up a Next.js project structure
4:	Linking two pages in Next.js using Link
5:	How to use the Next.js Router
6:	Dynamic content in Next.js with the router
7:	Prefetching content in Next.js
8:	How to programmatically change a route in Next.js
9:	View source to confirm SSR is working in Next.js
10:	Feed data to a Next.js component using getInitialProps
11:	▶︎ Styling Next.js components using CSS
12:	Next.js: populate the head tag with custom tags
13:	How to use Next.js API Routes
14:	How to get cookies server-side in a Next.js app
15:	Deploying a Next.js application on Now
16:	Deploying a Next.js app in production