App Router：CSS 樣式設定 | Next.js

目前，您的主頁沒有任何樣式。讓我們看看您可以透過哪些方式為 Next.js 應用程式設定樣式。

全域樣式

如果您查看 /app/ui 資料夾，會看到一個名為 global.css 的檔案。您可以使用此檔案為應用程式中的所有路由添加 CSS 規則，例如 CSS 重置規則、適用於連結等 HTML 元素的網站全域樣式等。

您可以在應用程式的任何元件中導入 global.css，但通常建議將其添加到頂層元件中。在 Next.js 中，這是根佈局 (root layout)（稍後會詳細介紹）。

透過導航至 /app/layout.tsx 並導入 global.css 檔案，為您的應用程式添加全域樣式：

/app/layout.tsx

import '@/app/ui/global.css';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

在開發伺服器仍在運行的情況下，儲存變更並在瀏覽器中預覽。您的主頁現在應該看起來像這樣：

但等一下，您並沒有添加任何 CSS 規則，這些樣式是從哪裡來的？

如果您查看 global.css，會注意到一些 @tailwind 指令：

/app/ui/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind 是一個 CSS 框架，允許您直接在 React 程式碼中快速編寫效用類別 (utility classes)，從而加快開發過程。

在 Tailwind 中，您可以透過添加類別名稱來為元素設定樣式。例如，添加 "text-blue-500" 會將 <h1> 文字變為藍色：

<h1 className="text-blue-500">I'm blue!</h1>

雖然 CSS 樣式是全域共享的，但每個類別都是單獨應用於每個元素。這意味著如果您添加或刪除元素，無需擔心維護單獨的樣式表、樣式衝突或隨著應用程式擴展而增長的 CSS 套件大小。

當您使用 create-next-app 開始新專案時，Next.js 會詢問您是否要使用 Tailwind。如果選擇 是，Next.js 會自動安裝必要的套件並在您的應用程式中配置 Tailwind。

如果您查看 /app/page.tsx，會看到我們在範例中使用了 Tailwind 類別。

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
 
export default function Page() {
  return (
    // 這些是 Tailwind 類別：
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
    // ...
  )
}

如果您是第一次使用 Tailwind，不用擔心。為了節省時間，我們已經為您將使用的所有元件設定了樣式。

讓我們試試 Tailwind！複製下面的程式碼並將其貼到 /app/page.tsx 中的 <p> 元素上方：

/app/page.tsx

<div
  className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

如果您更喜歡編寫傳統的 CSS 規則或將樣式與 JSX 分開，CSS 模組是一個很好的替代方案。

CSS 模組

CSS 模組透過自動建立唯一的類別名稱，允許您將 CSS 限定在元件範圍內，因此您也無需擔心樣式衝突。

在本課程中，我們將繼續使用 Tailwind，但讓我們花點時間看看如何使用 CSS 模組來實現與上面測驗相同的結果。

在 /app/ui 中，建立一個名為 home.module.css 的新檔案，並添加以下 CSS 規則：

/app/ui/home.module.css

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

然後，在您的 /app/page.tsx 檔案中導入樣式，並將您添加的 <div> 中的 Tailwind 類別名稱替換為 styles.shape：

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />
    // ...
  )
}

儲存變更並在瀏覽器中預覽。您應該會看到與之前相同的形狀。

Tailwind 和 CSS 模組是設定 Next.js 應用程式樣式的兩種最常見方式。使用哪一種取決於個人偏好——您甚至可以在同一個應用程式中同時使用兩者！

使用 `clsx` 函式庫切換類別名稱

在某些情況下，您可能需要根據狀態或其他條件來有條件地為元素設定樣式。

clsx 是一個可以讓您輕鬆切換類別名稱的函式庫。我們建議查看文件以獲取更多詳細資訊，但以下是基本用法：

假設您想建立一個接受 status 的 InvoiceStatus 元件。狀態可以是 'pending' 或 'paid'。
如果是 'paid'，您希望顏色為綠色。如果是 'pending'，您希望顏色為灰色。

您可以使用 clsx 來有條件地應用類別，如下所示：

/app/ui/invoices/status.tsx

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

其他樣式解決方案

除了我們討論的方法外，您還可以使用以下方式為 Next.js 應用程式設定樣式：

Sass，允許您導入 .css 和 .scss 檔案。
CSS-in-JS 函式庫，例如 styled-jsx、styled-components 和 emotion。

請查看 CSS 文件以獲取更多資訊。

CSS 樣式設定

全域樣式

Tailwind

CSS 模組

使用 clsx 函式庫切換類別名稱

其他樣式解決方案

On this page

使用 `clsx` 函式庫切換類別名稱