Next.js 应用程序中使用 CSS：新手指南

如何在应用程序中使用 CSS

Next.js 提供了多种在应用程序中使用 CSS 的方法，包括：

[toc]

CSS 模块
全局 CSS
Tailwind CSS
Sass
CSS-in-JS
外部样式表

本页将指导你如何使用这些方法。

CSS 模块

CSS 模块通过生成唯一的类名来局部作用域 CSS。这允许你在不同文件中使用相同的类，而不用担心冲突。

要开始使用 CSS 模块，创建一个扩展名为 .module.css 的新文件，并将其导入到 app 目录中的任何组件中：

.blog {
  padding: 24px;
}

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


export default function Page({ children }: { children: React.ReactNode }) {
  return <main className={styles.blog}>{children}</main>
}

全局 CSS

你可以使用全局 CSS 在整个应用程序中应用样式。

要使用全局样式，创建一个新 CSS 文件，例如 app/global.css：

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

在根布局（app/layout.js）中导入该文件，以将样式应用于应用程序中的每个路由：

// 这些样式适用于应用程序中的每个路由
import './global.css'


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh">
      <body>{children}</body>
    </html>
  )
}

小贴士：全局样式可以导入到 app 目录中的任何布局、页面或组件中。但是，由于 Next.js 使用 React 内置的样式表支持与 Suspense 集成，这种内置支持目前在你导航到不同路由时不会移除样式表。因此，我们建议将全局样式用于真正全局的 CSS，而将 CSS 模块用于作用域 CSS。

Tailwind CSS

Tailwind CSS 是一个以实用程序为主的 CSS 框架，与 Next.js 无缝集成。

安装 Tailwind

要开始使用 Tailwind，安装必要的 Tailwind CSS 包：

npm install -D tailwindcss @tailwindcss/postcss postcss

配置 Tailwind

在项目的根目录中创建一个 postcss.config.mjs 文件，并将 @tailwindcss/postcss 插件添加到你的 PostCSS 配置中：

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

使用 Tailwind

将 Tailwind 指令添加到你的全局样式表中：

然后，在根布局中导入样式：

import type { Metadata } from 'next'


// 这些样式适用于应用程序中的每个路由
import './globals.css'


export const metadata: Metadata = {
  title: '创建 Next App | 编程狮（w3cschool.cn）',
  description: '由 create next app 生成',
}


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh">
      <body>{children}</body>
    </html>
  )
}

最后，你可以在应用程序中开始编写 Tailwind 的实用程序类。

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, W3Cschool!</h1>
}

Sass

Next.js 使用 .scss 和 .sass 扩展名和语法与 Sass 集成。

你还可以通过 CSS 模块和 .module.scss 或 .module.sass 扩展名使用组件级 Sass。

安装 Sass

要开始使用 Sass，安装 sass 包：

npm install --save-dev sass

自定义 Sass 选项

如果你想配置 Sass 选项，请在 next.config.js 中使用 sassOptions 选项。

import type { NextConfig } from 'next'


const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}


export default nextConfig

CSS-in-JS

警告：需要运行时 JavaScript 的 CSS-in-JS 库目前不支持在 React 服务器组件中使用。在使用 CSS-in-JS 时，需要库作者支持 React 的最新版本，例如服务器组件和流式传输。

以下库在 app 目录的客户端组件中受支持（按字母顺序排列）：

以下库目前正在进行支持工作：

emotion

如果你想为服务器组件添加样式，我们建议使用 CSS 模块或输出 CSS 文件的其他解决方案，例如 Tailwind CSS。

配置 CSS-in-JS

要配置 CSS-in-JS，你需要：

创建一个样式注册表来收集渲染中的所有 CSS 规则。
使用 useServerInsertedHTML 钩子在可能使用它们的内容之前注入规则。
创建一个客户端组件，在初始服务器端渲染期间用样式注册表包裹你的应用。

`styled-jsx`

要为你的应用程序配置 styled-jsx，创建一个新的注册表：

'use client'


import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'


export default function StyledJsxRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // 只在初始状态下创建一次样式表
  const [jsxStyleRegistry] = useState(() => createStyleRegistry())


  useServerInsertedHTML(() => {
    const styles = jsxStyleRegistry.styles()
    jsxStyleRegistry.flush()
    return <>{styles}</>
  })


  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
}

然后，在根布局中用注册表包裹：

import StyledJsxRegistry from './registry'


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  )
}

`styled-components`

要使用 styled-components，在 next.config.js 中启用它：

import type { NextConfig } from 'next'


const nextConfig: NextConfig = {
  compiler: {
    styledComponents: true,
  },
}


export default nextConfig

然后，使用 styled-components API 创建一个全局注册表组件来收集渲染期间生成的所有 CSS 样式规则，以及一个函数来返回这些规则。然后使用 useServerInsertedHTML 钩子将注册表中收集的样式注入到根布局的 <head> HTML 标签中。

'use client'


import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'


export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // 只在初始状态下创建一次样式表
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())


  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return <>{styles}</>
  })


  if (typeof window !== 'undefined') return <>{children}</>


  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  )
}

用样式注册表组件包裹根布局的 children：

import StyledComponentsRegistry from './lib/registry'


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  )
}

外部样式表

由外部包发布的样式表可以导入到 app 目录中的任何位置，包括共置组件：

import 'bootstrap/dist/css/bootstrap.css'


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh">
      <body className="container">{children}</body>
    </html>
  )
}

外部样式表必须直接从 npm 包导入或下载并与你的代码库共置。你不能使用 <link rel="stylesheet" />。

API 参考

阅读 API 参考，了解有关本页中提到的功能的更多信息。

sass选项
配置 Sass 选项。
Next.js 编译器
Next.js Compiler，用 Rust 编写，用于转换和缩小 Next.js 应用程序。