Next.js 應(yīng)用程序中使用 CSS：新手指南

2025-03-20 11:44 更新

如何在應(yīng)用程序中使用 CSS

Next.js 提供了多種在應(yīng)用程序中使用 CSS 的方法，包括：

[toc]

  • CSS 模塊
  • 全局 CSS
  • Tailwind CSS
  • Sass
  • CSS-in-JS
  • 外部樣式表

本頁(yè)將指導(dǎo)你如何使用這些方法。

CSS 模塊

CSS 模塊通過(guò)生成唯一的類名來(lái)局部作用域 CSS。這允許你在不同文件中使用相同的類，而不用擔(dān)心沖突。

要開(kāi)始使用 CSS 模塊，創(chuàng)建一個(gè)擴(kuò)展名為 .module.css 的新文件，并將其導(dǎo)入到 app 目錄中的任何組件中：

  1. .blog {
  2.   padding: 24px;
  3. }

  1. import styles from './styles.module.css'
  4. export default function Page({ children }: { children: React.ReactNode }) {
  5.   return <main className={styles.blog}>{children}</main>
  6. }

全局 CSS

你可以使用全局 CSS 在整個(gè)應(yīng)用程序中應(yīng)用樣式。

要使用全局樣式，創(chuàng)建一個(gè)新 CSS 文件，例如 app/global.css：

  1. body {
  2.   padding: 20px 20px 60px;
  3.   max-width: 680px;
  4.   margin: 0 auto;
  5. }

在根布局（app/layout.js）中導(dǎo)入該文件，以將樣式應(yīng)用于應(yīng)用程序中的每個(gè)路由：

  1. // 這些樣式適用于應(yīng)用程序中的每個(gè)路由
  2. import './global.css'
  5. export default function RootLayout({
  6.   children,
  7. }: {
  8.   children: React.ReactNode
  9. }) {
  10.   return (
  11.     <html lang="zh">
  12.       <body>{children}</body>
  13.     </html>
  14.   )
  15. }

小貼士：全局樣式可以導(dǎo)入到 app 目錄中的任何布局、頁(yè)面或組件中。但是，由于 Next.js 使用 React 內(nèi)置的樣式表支持與 Suspense 集成，這種內(nèi)置支持目前在你導(dǎo)航到不同路由時(shí)不會(huì)移除樣式表。因此，我們建議將全局樣式用于真正全局的 CSS，而將 CSS 模塊用于作用域 CSS。

Tailwind CSS

Tailwind CSS 是一個(gè)以實(shí)用程序?yàn)橹鞯?CSS 框架，與 Next.js 無(wú)縫集成。

安裝 Tailwind

要開(kāi)始使用 Tailwind，安裝必要的 Tailwind CSS 包：

  1. npm install -D tailwindcss @tailwindcss/postcss postcss

配置 Tailwind

在項(xiàng)目的根目錄中創(chuàng)建一個(gè) postcss.config.mjs 文件，并將 @tailwindcss/postcss 插件添加到你的 PostCSS 配置中：

  1. /** @type {import('tailwindcss').Config} */
  2. export default {
  3.   plugins: {
  4.     '@tailwindcss/postcss': {},
  5.   },
  6. }

使用 Tailwind

將 Tailwind 指令添加到你的全局樣式表中：

然后，在根布局中導(dǎo)入樣式：

  1. import type { Metadata } from 'next'
  4. // 這些樣式適用于應(yīng)用程序中的每個(gè)路由
  5. import './globals.css'
  8. export const metadata: Metadata = {
  9.   title: '創(chuàng)建 Next App | 編程獅（w3cschool.cn）',
  10.   description: '由 create next app 生成',
  11. }
  14. export default function RootLayout({
  15.   children,
  16. }: {
  17.   children: React.ReactNode
  18. }) {
  19.   return (
  20.     <html lang="zh">
  21.       <body>{children}</body>
  22.     </html>
  23.   )
  24. }

最后，你可以在應(yīng)用程序中開(kāi)始編寫(xiě) Tailwind 的實(shí)用程序類。

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

Sass

Next.js 使用 .scss 和 .sass 擴(kuò)展名和語(yǔ)法與 Sass 集成。

你還可以通過(guò) CSS 模塊和 .module.scss 或 .module.sass 擴(kuò)展名使用組件級(jí) Sass。

安裝 Sass

要開(kāi)始使用 Sass，安裝 sass 包：

  1. npm install --save-dev sass

自定義 Sass 選項(xiàng)

如果你想配置 Sass 選項(xiàng)，請(qǐng)?jiān)?next.config.js 中使用 sassOptions 選項(xiàng)。

  1. import type { NextConfig } from 'next'
  4. const nextConfig: NextConfig = {
  5.   sassOptions: {
  6.     additionalData: `$var: red;`,
  7.   },
  8. }
  11. export default nextConfig

CSS-in-JS

警告：需要運(yùn)行時(shí) JavaScript 的 CSS-in-JS 庫(kù)目前不支持在 React 服務(wù)器組件中使用。在使用 CSS-in-JS 時(shí)，需要庫(kù)作者支持 React 的最新版本，例如服務(wù)器組件和流式傳輸。

以下庫(kù)在 app 目錄的客戶端組件中受支持（按字母順序排列）：

以下庫(kù)目前正在進(jìn)行支持工作：

如果你想為服務(wù)器組件添加樣式，我們建議使用 CSS 模塊或輸出 CSS 文件的其他解決方案，例如 Tailwind CSS。

配置 CSS-in-JS

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

  1. 創(chuàng)建一個(gè)樣式注冊(cè)表來(lái)收集渲染中的所有 CSS 規(guī)則。
  2. 使用 useServerInsertedHTML 鉤子在可能使用它們的內(nèi)容之前注入規(guī)則。
  3. 創(chuàng)建一個(gè)客戶端組件，在初始服務(wù)器端渲染期間用樣式注冊(cè)表包裹你的應(yīng)用。

styled-jsx

要為你的應(yīng)用程序配置 styled-jsx，創(chuàng)建一個(gè)新的注冊(cè)表：

  1. 'use client'
  4. import React, { useState } from 'react'
  5. import { useServerInsertedHTML } from 'next/navigation'
  6. import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
  9. export default function StyledJsxRegistry({
  10.   children,
  11. }: {
  12.   children: React.ReactNode
  13. }) {
  14.   // 只在初始狀態(tài)下創(chuàng)建一次樣式表
  15.   const [jsxStyleRegistry] = useState(() => createStyleRegistry())
  18.   useServerInsertedHTML(() => {
  19.     const styles = jsxStyleRegistry.styles()
  20.     jsxStyleRegistry.flush()
  21.     return <>{styles}</>
  22.   })
  25.   return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
  26. }

然后，在根布局中用注冊(cè)表包裹：

  1. import StyledJsxRegistry from './registry'
  4. export default function RootLayout({
  5.   children,
  6. }: {
  7.   children: React.ReactNode
  8. }) {
  9.   return (
  10.     <html>
  11.       <body>
  12.         <StyledJsxRegistry>{children}</StyledJsxRegistry>
  13.       </body>
  14.     </html>
  15.   )
  16. }

styled-components

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

  1. import type { NextConfig } from 'next'
  4. const nextConfig: NextConfig = {
  5.   compiler: {
  6.     styledComponents: true,
  7.   },
  8. }
  11. export default nextConfig

然后，使用 styled-components API 創(chuàng)建一個(gè)全局注冊(cè)表組件來(lái)收集渲染期間生成的所有 CSS 樣式規(guī)則，以及一個(gè)函數(shù)來(lái)返回這些規(guī)則。然后使用 useServerInsertedHTML 鉤子將注冊(cè)表中收集的樣式注入到根布局的 <head> HTML 標(biāo)簽中。

  1. 'use client'
  4. import React, { useState } from 'react'
  5. import { useServerInsertedHTML } from 'next/navigation'
  6. import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
  9. export default function StyledComponentsRegistry({
  10.   children,
  11. }: {
  12.   children: React.ReactNode
  13. }) {
  14.   // 只在初始狀態(tài)下創(chuàng)建一次樣式表
  15.   const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
  18.   useServerInsertedHTML(() => {
  19.     const styles = styledComponentsStyleSheet.getStyleElement()
  20.     styledComponentsStyleSheet.instance.clearTag()
  21.     return <>{styles}</>
  22.   })
  25.   if (typeof window !== 'undefined') return <>{children}</>
  28.   return (
  29.     <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
  30.       {children}
  31.     </StyleSheetManager>
  32.   )
  33. }

用樣式注冊(cè)表組件包裹根布局的 children：

  1. import StyledComponentsRegistry from './lib/registry'
  4. export default function RootLayout({
  5.   children,
  6. }: {
  7.   children: React.ReactNode
  8. }) {
  9.   return (
  10.     <html>
  11.       <body>
  12.         <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
  13.       </body>
  14.     </html>
  15.   )
  16. }

外部樣式表

由外部包發(fā)布的樣式表可以導(dǎo)入到 app 目錄中的任何位置，包括共置組件：

  1. import 'bootstrap/dist/css/bootstrap.css'
  4. export default function RootLayout({
  5.   children,
  6. }: {
  7.   children: React.ReactNode
  8. }) {
  9.   return (
  10.     <html lang="zh">
  11.       <body className="container">{children}</body>
  12.     </html>
  13.   )
  14. }

外部樣式表必須直接從 npm 包導(dǎo)入或下載并與你的代碼庫(kù)共置。你不能使用 <link rel="stylesheet" />。

API 參考

閱讀 API 參考 ，了解有關(guān)本頁(yè)中提到的功能的更多信息。

  • sass選項(xiàng)
    配置 Sass 選項(xiàng)。

  • Next.js 編譯器
    Next.js Compiler，用 Rust 編寫(xiě)，用于轉(zhuǎn)換和縮小 Next.js 應(yīng)用程序。
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)