如何在 Next.js 中添加样式表？

在 Next.js 中添加样式表可以有多种方式，下面将一一介绍。

1. 在页面中使用内联样式

在 Next.js 中可以在页面中使用内联样式（inline style），这种方式适用于只需要在某些组件上应用一些较小的样式，而不需要额外的 CSS 文件的情况。以下是一个例子：

function HomePage() {
  return (
    <div style={{ color: "blue", fontSize: "20px" }}>
      这是一段带有内联样式的内容。
    </div>
  );
}

如上所示，可以通过添加 style 属性为元素应用内联样式。注意：内联样式必须是一个对象格式的 JavaScript，而不是字符串形式的 CSS。

2. 使用 CSS 模块化

为了在 Next.js 中使用 CSS，可以使用 CSS 模块化来封装样式。 CSS 模块化可以确保局部作用域，防止样式污染全局作用域。

首先，在页面所在的文件夹中创建一个名为 styles.module.css 的 CSS 文件。接着，可以将其导入到组件中，并使用导入的类名（class name）来应用样式，如下所示：

import styles from "./styles.module.css";

function HomePage() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, Next.js!</h1>
    </div>
  );
}

如上所示，使用 import 语句导入了 styles.module.css 文件，然后在组件中使用类名（class name） styles.container 和 styles.title 应用样式。需要注意的是，类名（class name）必须作为 className 属性传递给元素。

3. 使用全局样式

如果需要在整个 Next.js 应用中使用相同的样式，则可以使用全局样式。在 Next.js 中使用全局样式需要修改 pages/_app.js 文件。

在 pages/_app.js 文件中添加以下代码：

import "../styles/global.css";

function MyApp({ Component, pageProps }) {
  // ...
}

如上所示，使用 import 语句导入全局样式文件 global.css，然后在 MyApp 组件中添加样式。需要注意的是，这个文件必须位于 styles 文件夹中，且文件名必须为 global.css。

4. 使用第三方 UI 库

为了更快地建立应用程序和获得更好的用户体验，可以使用第三方 UI 库。 Next.js 支持与大多数流行的 React UI 库进行集成，包括但不限于 Material UI、Ant Design 和 Tailwind CSS。

以使用 Tailwind CSS 为例，在项目中安装 Tailwind CSS：

$ npm install tailwindcss

接着，在 pages/_app.js 文件中引入 Tailwind CSS：

import "../styles/index.css";

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

然后，创建 styles/index.css 文件并将以下代码添加到文件中：

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

如上所示，@tailwind 指令告诉 Next.js 使用 Tailwind CSS 的基础样式、组件和实用程序。

以上是在 Next.js 中添加样式表的常见方式。根据实际需求选择适合的方式即可。