引入样式

在 Next.js 中引入样式有多种方法，包括全局样式、模块化 CSS、以及使用 CSS-in-JS 库等。下面详细介绍几种常见的方式：

1. 全局样式

你可以通过创建一个全局的 CSS 文件，并在 _app.js 文件中引入它来为你的应用程序提供基础样式。

• 步骤：
  • 在项目的根目录下创建一个 styles 文件夹，并在其中创建一个全局样式文件，例如 globals.css。
  • 在 pages/_app.js 文件中导入这个全局样式文件。

// pages/_app.js
import "../styles/globals.css";

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

export default MyApp;

这样，globals.css 中的所有样式都会被应用到整个应用程序。

2. 模块化 CSS

Next.js 支持 CSS 模块，这是一种让样式局部化的有效方式。CSS 模块仅适用于定义它们的组件，从而避免了全局命名空间污染的问题。

• 步骤：
  • 创建一个与 React 组件同名但扩展名为 .module.css 的文件。
  • 在组件中导入并使用这个 CSS 模块。

// components/Button.js
import styles from "./Button.module.css";

export function Button() {
  return <button className={styles.error}>错误按钮</button>;
}

/* components/Button.module.css */
.error {
  color: white;
  background-color: red;
}

在这个例子中，.error 类仅在 Button 组件中有效，不会影响其他组件。

3. 使用 Sass

如果你更喜欢使用 Sass，Next.js 也支持这一点。首先需要安装 sass 包：

npm install sass
# 或者
yarn add sass

之后，你可以像使用普通 CSS 那样使用 .scss 或 .sass 文件。对于全局样式，只需在 _app.js 中导入你的 Sass 文件；对于 CSS 模块，可以使用 .module.scss 扩展名。

4. CSS-in-JS

虽然 Next.js 内置支持 CSS 和 Sass，但它同样兼容各种 CSS-in-JS 解决方案，如 styled-components 或 emotion。这些库允许你直接在 JavaScript 文件中定义样式。

以 styled-components 为例，你需要先安装它：

npm install styled-components
# 或者
yarn add styled-components

然后就可以在你的组件中使用它了：

import styled from "styled-components";

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

function HomePage() {
  return <Title>欢迎来到我的网站</Title>;
}

export default HomePage;

以上就是在 Next.js 中引入样式的几种主要方法。根据项目需求和个人偏好，你可以选择最适合的方式来组织和管理你的样式。无论是简单的全局样式还是复杂的模块化样式，Next.js 都提供了灵活且强大的支持。