2
章节2
CSS 样式
目前，您的主页没有任何样式。让我们看看在 Next.js 应用程序中设置样式的不同方法。
本章节内容...
我们将涵盖以下主题
如何向您的应用程序添加全局 CSS 文件。
两种不同的样式设置方式：Tailwind 和 CSS Modules。
如何使用 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 Modules 是一个很好的替代方案。
CSS Modules
CSS Modules 允许您通过自动创建唯一的类名将 CSS 作用域限定到组件，因此您也不必担心样式冲突。
我们将在本课程中继续使用 Tailwind，但让我们花一点时间看看如何使用 CSS Modules 从上面的测验中获得相同的结果。
在 /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 Modules 是 Next.js 应用程序中最常见的两种样式设置方法。您是使用其中一种还是另一种取决于个人喜好 - 您甚至可以在同一个应用程序中同时使用两者！
使用 clsx 库切换类名
在某些情况下，您可能需要根据状态或其他条件有条件地设置元素样式。
clsx 是一个库，可让您轻松切换类名。我们建议您查看文档 以获取更多详细信息，但这是基本用法
- 假设您要创建一个
InvoiceStatus组件，该组件接受status。状态可以是'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 文档 以获取更多信息。
这有帮助吗？