章节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 模块和 .module.scss 或 .module.sass 扩展使用组件级 Sass。

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

npm install -D sass

本课程就到这里！

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