样式技巧

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

你可以通读以下部分。无需对我们的应用进行更改！

使用 clsx 库切换类

clsx 是一个简单的库，可以让你轻松切换类名。你可以使用 npm install clsx 或 yarn add clsx 安装它。

请查看其文档以了解更多详细信息，但以下是基本用法

• 假设你想要创建一个接受 type 的 Alert 组件，它可以是 '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 文档。