章节18

样式设置技巧

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

你可以直接阅读以下章节。无需对我们的应用进行任何更改！

使用 `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}',
    // For the best performance and to avoid false positives,
    // be as specific as possible with your content configuration.
  ],
};

要了解有关自定义 PostCSS 配置的更多信息，请查阅 PostCSS 文档。

要轻松开始使用 Tailwind CSS，请查看我们的示例。

使用 Sass

开箱即用，Next.js 允许你使用 .scss 和 .sass 扩展名导入 Sass。你可以通过 CSS Modules 和 .module.scss 或 .module.sass 扩展名使用组件级 Sass。

在使用 Next.js 的内置 Sass 支持之前，请务必安装 sass

npm install -D sass

本课到此结束！

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