2
章節2
CSS 樣式
目前，您的首頁沒有任何樣式。讓我們來看看在 Next.js 應用程式中設定樣式的不同方法。
本章節內容
以下將涵蓋的主題：
如何將全域 CSS 檔案添加到您的應用程式。
兩種不同的樣式設定方式：Tailwind 和 CSS 模組。
如何使用 clsx 工具程式套件有條件地新增類別名稱。
全域樣式
如果您查看 /app/ui 資料夾，您會看到一個名為 global.css 的檔案。您可以使用此檔案將 CSS 規則新增到應用程式中的**所有**路由，例如 CSS 重設規則、連結等 HTML 元素的全站樣式等等。
您可以在應用程式中的任何元件中匯入 global.css，但通常建議將其新增到您的頂層元件。在 Next.js 中，這是根佈局（稍後會詳細說明）。
透過瀏覽至 /app/layout.tsx 並匯入 global.css 檔案，將全域樣式新增到您的應用程式
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 指令
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind
Tailwind 是一個 CSS 框架，它可以讓您在 TSX 標記中快速編寫功能類別 (Utility Classes)，進而加速開發流程。
在 Tailwind 中，您可以透過新增類別名稱來設定元素樣式。例如，新增 "text-blue-500" 類別會將 <h1> 的文字變成藍色。
<h1 className="text-blue-500">I'm blue!</h1>雖然 CSS 樣式是全域共用的，但每個類別都是單獨應用於每個元素。這表示如果您新增或刪除元素，您不必擔心維護個別的樣式表、樣式衝突或隨著應用程式規模擴展而增加的 CSS 檔案大小。
當您使用 create-next-app 開始一個新專案時，Next.js 會詢問您是否要使用 Tailwind。如果您選擇 yes，Next.js 會自動安裝必要的套件並在您的應用程式中設定 Tailwind。
如果您查看 /app/page.tsx，您會看到範例中使用了 Tailwind 類別。
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
export default function Page() {
return (
// These are Tailwind classes:
<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> 元素的上方。
<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 規則。
.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。
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 來根據條件套用類別，如下所示：
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 文件了解更多資訊。
這有幫助嗎？