Next.js 中如何暴露全局样式（Global Styles）-JavaScript中文网-JavaScript教程资源分享门户

对于前端工程师来说，无论是开发网站还是应用程序，样式设计是非常重要的一部分。在 Next.js 中，我们可以使用 CSS 模块和 CSS-in-JS 模块来管理样式文件，但是如果你需要在全局范围内应用样式，该怎么做呢？本文将为大家介绍 Next.js 中如何暴露全局样式（global styles）。

1. 使用 styled-jsx 暴露全局样式

Next.js 中一个常用的全局样式暴露方法是使用 styled-jsx 模块。styled-jsx 是一种 CSS-in-JS 模块，可以帮助我们在应用程序中管理样式。

要在你的 Next.js 应用程序中使用 styled-jsx，需要先安装依赖，命令如下：

npm install --save styled-jsx

安装完成后，我们可以创建一个单独的文件来编写我们的全局样式，例如 styles/global.js。

export default `
  body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
`

这里我们定义了一个 body 标签的 font-family，margin 和 padding 样式。接着，在你的页面中使用 style 组件来加载全局样式。

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

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

在这里，我们使用 style 组件在 JSX 中加载全局样式。

2. 通过 import 暴露全局样式

另一种暴露全局样式的方法是通过 import 引入外部样式表。我们可以在 Next.js 应用程序的 pages/_app.js 文件中进行全局样式引入。例如，创建一个 styles/global.css 文件并在 _app.js 中引入它。

// _app.js
import '../styles/global.css'

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

export default MyApp

我们也可以通过在 styles/ 目录下添加一个 _global.css 文件的方式为整个应用程序应用样式。在 Next.js 中，此类名称的样式表会被识别为全局样式表。

/* styles/_global.css */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

在 _app.js 中引入 _global.css 文件即可。

// _app.js
import '../styles/_global.css'

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

export default MyApp

总结

以上两种方法都可以用来暴露全局样式。在实际项目开发中，我们通常会使用多种方式来管理应用程序的样式，这取决于样式的复杂度和你的团队中使用的喜好。

在运用全局样式的同时也要注意样式覆盖的问题，因为全局样式的定义会影响到整个应用程序，所以可以使用 BEM 或者 CSS Selectors 优先级进行样式选择。

示例代码

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

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

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

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

/* styles/_global.css */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

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

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

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

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