2
章節2
CSS 樣式
目前，您的首頁沒有任何樣式。讓我們來看看您可以為 Next.js 應用程式設定樣式的不同方式。
在本章中...
以下是我們將涵蓋的主題
如何將全域 CSS 檔案新增至您的應用程式。
兩種不同的樣式設定方式：Tailwind 和 CSS modules。
如何使用 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 框架，透過讓您快速編寫 utility classes 直接在您的 React 程式碼中，來加速開發流程。
在 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 Modules 是絕佳的替代方案。
CSS Modules
CSS Modules 允許您透過自動建立唯一的類別名稱，將 CSS 的範圍限定在元件內，因此您也不必擔心樣式衝突。
我們將在本課程中繼續使用 Tailwind，但讓我們花點時間看看如何使用 CSS modules 從上面的測驗中獲得相同的結果。
在 /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 modules 是設定 Next.js 應用程式樣式的兩種最常見方式。您使用哪一種取決於個人偏好 - 您甚至可以在同一個應用程式中同時使用兩者！
使用 clsx 函式庫切換類別名稱
在某些情況下，您可能需要根據狀態或其他條件有條件地設定元素的樣式。
clsx 是一個讓您輕鬆切換類別名稱的函式庫。我們建議您查看文件 以取得更多詳細資訊，但以下是基本用法
- 假設您想要建立一個
InvoiceStatus元件，它接受status。狀態可以是'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 文件 以取得更多資訊。
這有幫助嗎？