章节2

CSS 样式

目前，你的主页没有任何样式。让我们看看为 Next.js 应用程序添加样式的不同方法。

在本章中...

我们将涵盖以下主题：

如何将全局 CSS 文件添加到你的应用程序。

两种不同的样式方法：Tailwind 和 CSS 模块。

如何使用 clsx 工具包有条件地添加类名。

全局样式

如果你查看 /app/ui 文件夹，你会看到一个名为 global.css 的文件。你可以使用此文件为应用程序中的所有路由添加 CSS 规则，例如 CSS 重置规则、链接等 HTML 元素的站点范围样式等等。

你可以在应用程序中的任何组件中导入 global.css，但通常最好将其添加到顶级组件中。在 Next.js 中，这是根布局（稍后会详细介绍）。

通过导航到 /app/layout.tsx 并导入 global.css 文件来为你的应用程序添加全局样式

import '@/app/ui/global.css';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

在开发服务器仍在运行的情况下，保存你的更改并在浏览器中预览它们。你的主页现在应该看起来像这样

但是等等，你没有添加任何 CSS 规则，样式是从哪里来的？

如果你查看 global.css，你会注意到一些 @tailwind 指令

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind 是一个 CSS 框架，它允许你直接在 React 代码中快速编写实用工具类，从而加快开发过程。

在 Tailwind 中，你通过添加类名来为元素设置样式。例如，添加 "text-blue-500" 会将 <h1> 文本变为蓝色

<h1 className="text-blue-500">I'm blue!</h1>

尽管 CSS 样式是全局共享的，但每个类都单独应用于每个元素。这意味着如果你添加或删除一个元素，你不必担心维护单独的样式表、样式冲突，或者随着应用程序的扩展而 CSS 捆绑包大小的增长。

当你使用 create-next-app 启动一个新项目时，Next.js 会询问你是否要使用 Tailwind。如果你选择 yes，Next.js 会自动安装必要的包并在你的应用程序中配置 Tailwind。

如果你查看 /app/page.tsx，你会发现我们在示例中使用了 Tailwind 类。

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
 
export default function Page() {
  return (
    // These are Tailwind classes:
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
    // ...
  )
}

如果你是第一次使用 Tailwind，请不要担心。为了节省时间，我们已经为所有你将使用的组件设置了样式。

让我们来玩转 Tailwind！复制下面的代码并将其粘贴到 /app/page.tsx 中 <p> 元素的上方

<div
  className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>

如果你更喜欢编写传统的 CSS 规则或将样式与 JSX 分开，那么 CSS 模块是一个很好的替代方案。

CSS 模块

CSS 模块允许你通过自动创建唯一的类名来将 CSS 作用域限制在组件内，这样你也不必担心样式冲突。

我们将在本课程中继续使用 Tailwind，但让我们花一点时间看看如何使用 CSS 模块实现上述测验中的相同结果。

在 /app/ui 内部，创建一个名为 home.module.css 的新文件并添加以下 CSS 规则

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

然后，在 /app/page.tsx 文件中导入样式，并将你添加的 <div> 中的 Tailwind 类名替换为 styles.shape

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />
    // ...
  )
}

保存你的更改并在浏览器中预览它们。你应该会看到和之前相同的形状。

Tailwind 和 CSS 模块是 Next.js 应用程序最常见的两种样式方法。使用哪种方法取决于你的偏好——你甚至可以在同一个应用程序中同时使用两者！

使用 `clsx` 库切换类名

在某些情况下，你可能需要根据状态或其他条件有条件地设置元素样式。

clsx 是一个可以让你轻松切换类名的库。我们建议查看文档了解更多详细信息，但这里是基本用法

假设你要创建一个接受 status 的 InvoiceStatus 组件。状态可以是 'pending' 或 'paid'。
如果状态是 'paid'，你希望颜色是绿色。如果状态是 'pending'，你希望颜色是灰色。

你可以使用 clsx 有条件地应用类，就像这样

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

其他样式解决方案

除了我们讨论的方法，你还可以使用以下方法来为 Next.js 应用程序设置样式

Sass 允许你导入 .css 和 .scss 文件。
CSS-in-JS 库，例如 styled-jsx、styled-components 和 emotion。

查看CSS 文档以获取更多信息。