在 Next.js 中如何启用自定义 CSS？-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，越来越多的开发者开始使用 Next.js 开发 Web 应用程序。在使用 Next.js 开发应用程序时，我们经常需要添加自定义 CSS 样式来美化应用程序的外观。但是，如何在 Next.js 中启用自定义 CSS 呢？本文将为您详细介绍 Next.js 中启用自定义 CSS 的方法。

一、使用 CSS 模块化

Next.js 中使用 CSS 模块化是一种方便的启用自定义 CSS 的方法。CSS 模块化允许您将 CSS 样式与组件相关联，以确保每个组件的样式不会影响其他组件。这种方法可以有效地避免出现 CSS 样式冲突的问题。

1. 安装依赖

首先，我们需要安装 @zeit/next-css 和 classnames 依赖。 @zeit/next-css 是 Next.js 中的一个插件，用于处理 CSS 文件。 classnames 是一个 JavaScript 库，用于动态生成 CSS 类名。

npm install @zeit/next-css classnames

2. 创建 CSS 文件

接下来，我们需要在 Next.js 应用程序的根目录下创建一个名为 styles 的文件夹，并在其中创建一个名为 global.css 的 CSS 文件。在该文件中，我们可以添加全局 CSS 样式，例如：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
}

3. 创建组件

接下来，我们需要创建一个 React 组件，并将 CSS 样式与该组件相关联。我们可以使用 classnames 库来动态生成 CSS 类名。

// javascriptcn.com 代码示例
import styles from "./button.module.css";
import classNames from "classnames";

export default function Button({ children, primary }) {
  const buttonClassNames = classNames(styles.button, {
    [styles.primary]: primary,
  });

  return <button className={buttonClassNames}>{children}</button>;
}

在上面的代码中，styles 对象是从 button.module.css 文件中导入的。classNames 函数用于动态生成 CSS 类名。在 buttonClassNames 变量中，我们使用 classNames 函数将 button 类和 primary 类动态添加到按钮元素上。

4. 配置 Next.js 应用程序

最后，我们需要在 Next.js 应用程序中配置 @zeit/next-css 插件。我们需要在 next.config.js 文件中添加以下代码：

const withCSS = require("@zeit/next-css");

module.exports = withCSS({});

在上面的代码中，我们使用 withCSS 函数包装 Next.js 配置对象，并将其作为导出值。

二、使用 styled-jsx

除了使用 CSS 模块化外，我们还可以使用 styled-jsx 来在 Next.js 应用程序中启用自定义 CSS。styled-jsx 是一种轻量级的 CSS-in-JS 库，允许我们在 React 组件中编写 CSS 样式。

1. 安装依赖

首先，我们需要安装 styled-jsx 依赖。

npm install styled-jsx

2. 创建组件

接下来，我们需要创建一个 React 组件，并使用 styled-jsx 编写 CSS 样式。

// javascriptcn.com 代码示例
export default function Button({ children, primary }) {
  return (
    <button>
      {children}
      <style jsx>{`
        button {
          font-size: 16px;
          padding: 8px 16px;
          border-radius: 4px;
          border: none;
          cursor: pointer;
          background-color: ${primary ? "blue" : "gray"};
          color: white;
        }
      `}</style>
    </button>
  );
}

在上面的代码中，我们使用 <style jsx> 标签来编写 CSS 样式。在样式中，我们可以使用 JavaScript 表达式来动态计算样式属性。例如，我们可以使用 ${primary ? "blue" : "gray"} 表达式来根据 primary 属性设置按钮的背景色。

三、使用第三方 CSS 库

除了使用 CSS 模块化和 styled-jsx 外，我们还可以使用第三方 CSS 库来在 Next.js 应用程序中启用自定义 CSS。例如，我们可以使用 Bootstrap 或 Material-UI 等流行的 CSS 库来快速创建美观的 Web 应用程序。

1. 安装依赖

首先，我们需要安装所需的 CSS 库。例如，要使用 Bootstrap，我们需要安装 bootstrap 和 jquery 依赖。

npm install bootstrap jquery

2. 引入 CSS 库

接下来，我们需要在 Next.js 应用程序中引入所需的 CSS 库。我们可以使用 pages/_app.js 文件来引入 CSS 库。在该文件中，我们可以使用 import 语句来导入 CSS 文件或 JavaScript 文件。

// javascriptcn.com 代码示例
import "bootstrap/dist/css/bootstrap.min.css";
import "jquery/dist/jquery.min.js";
import "bootstrap/dist/js/bootstrap.min.js";

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

export default MyApp;

在上面的代码中，我们使用 import 语句来导入 Bootstrap 的 CSS 和 JavaScript 文件。在 MyApp 组件中，我们将 Component 和 pageProps 作为参数传递，并返回一个包含 Component 和 pageProps 的 JSX 元素。

四、总结

在 Next.js 中启用自定义 CSS 是一项重要的任务，因为它可以帮助我们创建美观的 Web 应用程序。本文介绍了三种在 Next.js 中启用自定义 CSS 的方法：使用 CSS 模块化、使用 styled-jsx 和使用第三方 CSS 库。无论您选择哪种方法，都需要根据应用程序的需求进行选择。希望本文对您有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65631c5ad2f5e1655dccc18b