likes
comments
collection
share

Next.js14从入门到实战007：NextJS基础篇之next.js中如何使用CSS样式

作者站长头像
站长
· 阅读数 2

Web开发离不开CSS，那Next.js的CSS设置有什么不同吗？

全局样式

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

Next.js14从入门到实战007：NextJS基础篇之next.js中如何使用CSS样式

您可以在应用程序的任何组件中导入 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>
  );
}

保存后，你会发现，页面面在带有样式了

Next.js14从入门到实战007：NextJS基础篇之next.js中如何使用CSS样式

你如果查看global.css后， 你会发现你并没有添加任何CSS代码，那样式是怎么来的？

是的，global.css里面有个@tailwind

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

Tailwind

Tailwind 是一个 CSS 框架，它允许您直接在 TSX 标记中快速编写实用程序类，从而加快开发过程。

在 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，请不要担心。为了节省时间，我们已经设置了你将使用的所有组件的样式。

现在打开文件/app/page.tsx，并复制下面的代码并将其粘贴到元素<p>上方

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

这时，你可以看到一个黑色三角形

Next.js14从入门到实战007：NextJS基础篇之next.js中如何使用CSS样式

Tailwind是一个很方便的CSS库，集成了很多方便的方法。

当然，如果你喜欢编写传统的 CSS 规则或将样式，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 styles from '@/app/ui/home.module.css';
<div className={styles.shape} />;

保存更改并在浏览器中预览。你应该看到与以前相同的形状。

Next.js14从入门到实战007：NextJS基础篇之next.js中如何使用CSS样式

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。