Skip to content

Latest commit

 

History

History
163 lines (126 loc) · 4.81 KB

built-in-css-support.md

File metadata and controls

163 lines (126 loc) · 4.81 KB
Raw
description
Next.js supports including CSS files as Global CSS or CSS Modules, using `styled-jsx` for CSS-in-JS, or any other CSS-in-JS solution! Learn more here.

Built-In CSS Support

Adding a Stylesheet

Next.js allows you to import CSS files from a JavaScript file (pages/_app.js). This is possible because Next.js extends the concept of import beyond JavaScript.

To add a stylesheet to your application, import the CSS file within pages/_app.js:

styles.css

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', system-ui;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

pages/_app.js

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
// Read more: https://nextjs.org/docs/advanced-features/custom-app
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them—meaning you can keep application state.

In production, all CSS files will be automatically concatenated into a single minified .css file.

Adding Component-Level CSS

Next.js supports CSS Modules using the [name].module.css file naming convention.

CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.

This behavior makes CSS Modules the ideal way to include component-level CSS. CSS Module files can be imported anywhere in your application.

For example:

components/Button.module.css

/*
You do not need to worry about .error {} colliding with any other `.css`
files!
*/
.error {
  color: white;
  background-color: red;
}

components/Button.js

import styles from './Button.module.css'

export function Button() {
  return (
    <button type="button" className={styles.error}>
      Destroy
    </button>
  )
}

CSS Modules are an optional feature. Regular <link> stylesheets and CSS files are fully supported. CSS Modules are only enabled for files with the .module.css extension.

In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files. These .css files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.

CSS-in-JS

Examples

It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles:

function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}

export default HiThere

We bundle styled-jsx to provide support for isolated scoped CSS. The aim is to support "shadow CSS" similar to Web Components, which unfortunately do not support server-rendering and are JS-only.

See the above examples for other popular CSS-in-JS solutions (like Styled Components).

A component using styled-jsx looks like this:

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld

Please see the styled-jsx documentation for more examples.

Sass, Less, and Stylus Support

To support importing .scss, .less or .styl files you can use the following plugins: