跳至内容
页面路由器构建你的应用样式

样式

示例

Next.js 支持多种处理 CSS 的方式，包括

CSS 模块

Next.js 通过使用 .module.css 扩展名内置支持 CSS 模块。

CSS 模块通过自动创建唯一的类名来本地作用域 CSS。这允许你在不同的文件中使用相同的类名，而无需担心冲突。这种行为使 CSS 模块成为包含组件级 CSS 的理想方式。

示例

例如，考虑 components/ 文件夹中可重用的 Button 组件

首先，创建 components/Button.module.css，内容如下

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

然后，创建 components/Button.js，导入并使用上述 CSS 文件

components/Button.js
import styles from './Button.module.css'
 
export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSS 模块**仅对扩展名为 .module.css 和 .module.sass 的文件启用**。

在生产环境中，所有 CSS 模块文件将自动连接到**多个最小化和代码分割**的 .css 文件中。这些 .css 文件表示应用程序中的热执行路径，确保为应用程序绘制加载最少的 CSS。

全局样式

要将样式表添加到你的应用程序中，请在 pages/_app.js 中导入 CSS 文件。

例如，考虑以下名为 styles.css 的样式表

styles.css
body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

创建pages/_app.js 文件（如果不存在）。然后，import styles.css 文件。

pages/_app.js
import '../styles.css'
 
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

这些样式 (styles.css) 将应用于应用程序中的所有页面和组件。由于样式表的全局特性，为了避免冲突，你可能**只能在pages/_app.js 中导入它们**。

在开发环境中，以这种方式表达样式表允许你的样式在编辑时热重载，这意味着你可以保留应用程序状态。

在生产环境中，所有 CSS 文件将自动连接到单个最小化的 .css 文件中。CSS 连接的顺序将与 CSS 导入到 _app.js 文件中的顺序匹配。特别注意导入的 JS 模块，这些模块包含自己的 CSS；JS 模块的 CSS 将按照与导入的 CSS 文件相同的排序规则连接。例如

import '../styles.css'
// The CSS in ErrorBoundary depends on the global CSS in styles.css,
// so we import it after styles.css.
import ErrorBoundary from '../components/ErrorBoundary'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

外部样式表

Next.js 允许您从 JavaScript 文件中导入 CSS 文件。这是可能的，因为 Next.js 扩展了 import 在 JavaScript 中的概念。

从 node_modules 导入样式

从 Next.js 9.5.4 版本开始，允许在应用程序的任何位置从 node_modules 导入 CSS 文件。

对于全局样式表，例如 bootstrap 或 nprogress，您应该在 pages/_app.js 中导入文件。例如

pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

要导入第三方组件所需的 CSS，您可以在组件中进行导入。例如

components/example-dialog.js
import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'
 
function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)
 
  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

其他功能

Next.js 包含其他功能来改善添加样式的编写体验。

  • 在使用 next dev 本地运行时，本地样式表（全局或 CSS 模块）将利用 快速刷新 来立即反映保存的更改。
  • 使用 next build 构建生产环境时，CSS 文件将捆绑到更少的压缩 .css 文件中，以减少检索样式所需的网络请求次数。
  • 如果您禁用 JavaScript，样式仍将在生产构建 (next start) 中加载。但是，next dev 仍然需要 JavaScript 才能启用 快速刷新。

CSS 模块

使用 CSS 模块为您的 Next.js 应用程序设置样式。

Tailwind CSS

使用 Tailwind CSS 为您的 Next.js 应用程序设置样式。

CSS-in-JS

在 Next.js 中使用 CSS-in-JS 库。

Sass

了解如何在 Next.js 应用程序中使用 Sass。