頁面路由 (Pages Router)：樣式設計技巧

以下是一些可能有幫助的樣式設計技巧。

您可以單純閱讀以下章節，無需對我們的應用程式進行任何修改！

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

clsx 是一個簡單的函式庫，可讓您輕鬆切換類別名稱。您可以使用 npm install clsx 或 yarn add clsx 安裝它。

請參考其文件以獲取更多詳細資訊，以下是基本用法：

假設您想建立一個 Alert 元件，它接受 type 參數，可以是 'success' 或 'error'。
如果是 'success'，您希望文字顏色為綠色；如果是 'error'，則希望文字顏色為紅色。

您可以先編寫一個 CSS 模組（例如 alert.module.css），如下所示：

.success {
  color: green;
}
.error {
  color: red;
}

然後像這樣使用 clsx：

import styles from './alert.module.css';
import { clsx } from 'clsx';
 
export default function Alert({ children, type }) {
  return (
    <div
      className={clsx({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error',
      })}
    >
      {children}
    </div>
  );
}

自訂 PostCSS 配置

Next.js 預設使用 PostCSS 來編譯 CSS，無需任何配置。

若要自訂 PostCSS 配置，您可以建立一個名為 postcss.config.js 的頂層檔案。這在使用 Tailwind CSS 等函式庫時特別有用。

以下是新增 Tailwind CSS 的步驟。首先，安裝套件：

npm install -D tailwindcss autoprefixer postcss

然後，建立 postcss.config.js：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

我們還建議透過在 tailwind.config.js 中指定 content 選項來配置內容來源：

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // 為了獲得最佳效能並避免誤判，
    // 請盡可能具體地配置您的內容來源。
  ],
};

若要深入了解如何自訂 PostCSS 配置，請查閱 PostCSS 文件。

若要輕鬆開始使用 Tailwind CSS，請參考我們的範例。

使用 Sass

Next.js 預設支援導入 Sass，包括 .scss 和 .sass 副檔名。您可以透過 CSS 模組使用元件層級的 Sass，副檔名為 .module.scss 或 .module.sass。

在使用 Next.js 內建的 Sass 支援之前，請確保安裝 sass：

npm install -D sass

本課程到此結束！

若要深入了解 Next.js 的內建 CSS 支援和 CSS 模組，請查閱 CSS 文件。

樣式設計技巧

使用 clsx 函式庫切換類別

自訂 PostCSS 配置

使用 Sass

本課程到此結束！

On this page

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