Pages Router：样式技巧 | Next.js

以下是一些可能有用的样式技巧。

您可以阅读以下部分，无需对我们的应用进行修改！

使用 `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 默认支持通过 .scss 和 .sass 扩展名导入 Sass。您可以通过 CSS 模块和 .module.scss 或 .module.sass 扩展名使用组件级 Sass。

在使用 Next.js 内置的 Sass 支持之前，请确保安装 sass：

npm install -D sass

本节内容到此结束！

要了解更多关于 Next.js 内置 CSS 支持和 CSS 模块的信息，请参阅 CSS 文档。

样式技巧

使用 clsx 库切换类名

自定义 PostCSS 配置

使用 Sass

本节内容到此结束！

On this page

使用 `clsx` 库切换类名