如何在 Next.js 中添加全局样式表-JavaScript中文网-JavaScript教程资源分享门户

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

在 Next.js 中添加全局样式表有许多种不同的方法，但是最常见的方法是通过导入 CSS 文件或者 CSS 模块来实现。这篇文章将会讨论如何在 Next.js 中使用 CSS 文件或 CSS 模块来添加全局样式表，并给出完整的演示代码。

使用 CSS 文件

在 Next.js 中，你可以直接将 import 语句用于 CSS 文件，就像下面这样：

import '../styles/global.css'

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

在上面的例子中，我们将 global.css 文件导入到我们的应用程序中。由于所有组件都共享相同的 head 元素，这个导入语句将为整个应用程序添加全局样式表。

在 global.css 中，你可以编写任何你想要添加到全局样式表中的样式。例如：

html, body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

使用 CSS 模块

另一个添加全局样式表的方法是使用 CSS 模块。在 Next.js 中，你可以使用 CSS 模块来将 CSS 样式与组件相关联，并确保它们不会泄漏到全局作用域中。

要使用 CSS 模块，请先在项目中启用 CSS 模块支持。你可以通过在 Next.js 配置文件中添加以下代码来启用它：

-- -------------------- ---- -------
-- --------------

-------------- - -
  -------- -------- - -------- -- -- -
    -- ---------- -
      ----- --------- - ---------------------
      ----- ------------- - ---------------------
      ---------------- - -
        --------- -------- --------- -- -
          -- -------------------------- ------ ----------
          -- ------- ---------------- --- ----------- -
            ------------------------- -------- ---------
          - ---- -
            ----------
          -
        --
        ---------- ---------------- --- ---------- - -- - ---------------
      -

      -----------------------------
        ----- ----------
        ---- --------------
      --
    -
    ------ ------
  --

  ----------- -----
-

完成配置后，你就可以使用 CSS 模块来创建全局样式表了。在 pages/_app.js 文件中，你可以将全局 CSS 模块导入到应用程序中。

import styles from '../styles/global.module.css'

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

export default MyApp

在上面的例子中，我们将 global.module.css 文件导入到我们的应用程序中。由于所有组件都共享相同的 head 元素，此导入语句将为整个应用程序添加全局样式表。

在 global.module.css 中，你可以编写任何你想要添加到全局样式表中的样式，并按照通常的方式使用 CSS 模块语法。例如：

:global(html, body) {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

在上面的例子中，我们使用 :global() 选择器将样式添加到全局作用域中。

结论

以上，我们介绍了在 Next.js 中添加全局样式表的两种方法：使用 CSS 文件和 CSS 模块。在实际项目中，你可以选择最适合你的情况的解决方案，或者根据不同的情况来混合使用两种方法。无论你选择哪种方法，它们都将很好地适应你的应用程序，并且会让你的样式更加整洁。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/676e10b32a18d78edd8f16c6