对于前端工程师来说，无论是开发网站还是应用程序，样式设计是非常重要的一部分。在 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。
------ ------- -
---- -
------------ ---------- ------ ------ -----------
------- --
-------- --
-
-这里我们定义了一个 body 标签的 font-family，margin 和 padding 样式。接着，在你的页面中使用 style 组件来加载全局样式。
------ ------------ ---- ------------------
------ ------- -------- ------ -
------ -
--
------ --- -----------------------------
-----------------
---
-
-在这里，我们使用 style 组件在 JSX 中加载全局样式。
2. 通过 import 暴露全局样式
另一种暴露全局样式的方法是通过 import 引入外部样式表。我们可以在 Next.js 应用程序的 pages/_app.js 文件中进行全局样式引入。例如，创建一个 styles/global.css 文件并在 _app.js 中引入它。
-- ------- ------ ---------------------- -------- ------- ---------- --------- -- - ------ ---------- -------------- -- - ------ ------- -----
我们也可以通过在 styles/ 目录下添加一个 _global.css 文件的方式为整个应用程序应用样式。在 Next.js 中，此类名称的样式表会被识别为全局样式表。
-- ------------------ -- ---- - ------------ ---------- ------ ------ ----------- ------- -- -------- -- -
在 _app.js 中引入 _global.css 文件即可。
-- ------- ------ ----------------------- -------- ------- ---------- --------- -- - ------ ---------- -------------- -- - ------ ------- -----
总结
以上两种方法都可以用来暴露全局样式。在实际项目开发中，我们通常会使用多种方式来管理应用程序的样式，这取决于样式的复杂度和你的团队中使用的喜好。
在运用全局样式的同时也要注意样式覆盖的问题，因为全局样式的定义会影响到整个应用程序，所以可以使用 BEM 或者 CSS Selectors 优先级 进行样式选择。
示例代码
-- ----------------
------ ------- -
---- -
------------ ---------- ------ ------ -----------
------- --
-------- --
-
--- --------------
------ ------------ ---- ------------------
------ ------- -------- ------ -
------ -
--
------ --- -----------------------------
-----------------
---
-
--- ------------------ -- ---- - ------------ ---------- ------ ------ ----------- ------- -- -------- -- -
-- ------- ------ ----------------------- -- - ------ ---------------------- -------- ------- ---------- --------- -- - ------ ---------- -------------- -- - ------ ------- -----
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6454cce5968c7c53b088f688