在 Next.js 中，我们可以使用 CSS Modules 来为每个组件添加局部 CSS 样式。但是，有时候我们需要为整个应用程序添加全局 CSS 样式，以确保整个应用程序具有统一的样式。本文将介绍如何在 Next.js 中添加全局 CSS 样式。
第一步：创建全局 CSS 文件
首先，我们需要创建一个全局 CSS 文件，并将其放置在 public 目录中。我们可以将其命名为 global.css，或者根据个人喜好命名。
在 global.css 文件中，我们可以添加任何我们想要的全局样式。例如：
---- - ------------ ------ ----------- ----------------- -------- -
第二步：导入全局 CSS 文件
接下来，我们需要导入全局 CSS 文件，并将其添加到我们的应用程序中。为此，我们可以使用 pages/_app.js 文件。
在 pages/_app.js 文件中，我们可以使用 import 语句导入全局 CSS 文件。然后，我们可以将其添加到我们应用程序的 head 中。
------ ----------------------- -------- ------- ---------- --------- -- - ------ ---------- -------------- -- - ------ ------- ------
现在，我们的应用程序中就可以使用全局 CSS 样式了。
示例代码
以下是一个示例代码，展示如何在 Next.js 中添加全局 CSS 样式。
-- -----------------
---- -
------------ ------ -----------
----------------- --------
-
-- -------------
------ -----------------------
-------- ------- ---------- --------- -- -
------ ---------- -------------- --
-
------ ------- ------
-- --------------
-------- ------ -
------ -
-----
----------- -- -- ------- ---------
------- -- ---- ---------
------
-
-
------ ------- -----在上面的示例代码中，我们创建了一个全局 CSS 文件 public/global.css，其中包含了 body 的样式。然后，我们在 pages/_app.js 文件中导入了该文件，并将其添加到应用程序的 head 中。最后，在 pages/index.js 文件中，我们创建了一个简单的组件，并使用了全局样式。
结论
在 Next.js 中添加全局 CSS 样式非常简单。我们只需要创建一个全局 CSS 文件，并将其导入到我们的应用程序中。这样，我们就可以确保整个应用程序具有统一的样式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67283de32e7021665e1f8ce8