Next.js 是一个流行的 React 框架，它提供了一些很好的功能，例如静态导出、服务器端渲染、自动代码分割和优化等。在 Next.js 中，我们可以使用 CSS 模块来管理组件级别的样式，但如果我们想要应用全局样式，该怎么办呢？在本文中，我们将介绍如何在 Next.js 中实现全局 CSS 样式。
为什么需要全局 CSS 样式？
在一些情况下，我们需要在整个应用程序中使用相同的样式，例如：
- 定义全局颜色、字体、边距等；
- 引入第三方 CSS 库，例如 Bootstrap、Ant Design 等；
- 在多个页面之间共享样式。
在 Next.js 中使用全局样式
在 Next.js 中，我们可以使用 pages/_app.js 文件来定义全局样式。该文件是 Next.js 中的特殊文件，用于覆盖默认的 App 组件。我们可以在该文件中引入全局样式，并将其应用于整个应用程序。
下面是一个简单的示例：
// pages/_app.js
import "../styles/global.css";
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}在上面的示例中，我们首先引入了全局样式文件 global.css，然后将其应用于整个应用程序。注意，我们没有在 Component 组件中使用 className 属性，因为全局样式已经应用于整个应用程序。
创建全局样式文件
接下来，我们需要创建全局样式文件 global.css。在 Next.js 中，我们可以将样式文件放在 styles 目录下。如果该目录不存在，我们可以手动创建它。
在 global.css 文件中，我们可以定义全局样式，例如：
-- -------------------- ---- ------- -- ----------------- -- ---- - ------------ ---------- ------ ------ ----------- ---------- ----- ------------ ---- ------- -- -------- -- - --- --- --- --- --- -- - ------- -- -------- -- - - - ------ -------- ---------------- ----- - ------- - ---------------- ---------- - ------ - ------- ----- ----------------- -------- ------ ----- -------- --- ----- -------------- ---- ------- -------- - ------------ - ----------------- -------- -
在上面的示例中，我们定义了一些基本的全局样式，例如设置字体、颜色、边距、链接样式等。我们还定义了一个按钮样式，用于在整个应用程序中使用。
在全局样式中引入第三方 CSS 库
如果我们想要在全局样式中引入第三方 CSS 库，该怎么办呢？在 Next.js 中，我们可以使用 @import 指令来引入其他 CSS 文件。例如，如果我们想要引入 Bootstrap：
/* styles/global.css */
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css");
/* rest of the global styles */在上面的示例中，我们使用 @import 指令来引入 Bootstrap 的 CSS 文件。然后，我们可以在全局样式中使用 Bootstrap 的样式类。
总结
在本文中，我们介绍了如何在 Next.js 中实现全局 CSS 样式。我们可以使用 pages/_app.js 文件来定义全局样式，并将其应用于整个应用程序。我们还介绍了如何在全局样式中引入第三方 CSS 库。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657b0721d2f5e1655d58aba0