页面路由 (Pages Router): 全局样式

CSS 模块 (CSS Modules) 适用于组件级样式。但如果需要某些 CSS 被所有页面加载，Next.js 也提供了支持。

要为应用加载全局 CSS (global CSS)，请创建一个名为 pages/_app.js 的文件，内容如下：

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

_app.js 的默认导出是一个顶级 React 组件，它包裹了应用中的所有页面。你可以使用此组件在页面导航间保持状态，或像我们这里所做的那样添加全局样式。了解更多关于 _app.js 文件。

重启开发服务器

重要提示： 添加 pages/_app.js 后需要重启开发服务器。按 Ctrl + c 停止服务器并运行：

npm run dev

添加全局 CSS

在 Next.js 中，你可以通过在 pages/_app.js 中导入文件来添加全局 CSS (global CSS)。全局 CSS 不能在其他任何地方导入。

全局 CSS (global CSS) 无法在 pages/_app.js 之外导入的原因是全局 CSS 会影响页面上的所有元素。

如果从首页导航到 /posts/first-post 页面，首页的全局样式会意外影响 /posts/first-post。

你可以将全局 CSS 文件放在任何位置并使用任意名称。让我们按照以下步骤操作：

创建一个顶级 styles 目录和一个 global.css 文件
在 styles/global.css 中添加以下 CSS 代码。这段代码会重置一些样式并更改 a 标签的颜色：

html,
body {
  padding: 0;
  margin: 0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  line-height: 1.6;
  font-size: 18px;
}
 
* {
  box-sizing: border-box;
}
 
a {
  color: #0070f3;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
img {
  max-width: 100%;
  display: block;
}

最后，在你之前创建的 pages/_app.js 文件中导入 CSS 文件：

// `pages/_app.js`
import '../styles/global.css';
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

现在，如果你访问 http://localhost:3000/posts/first-post，将会看到样式已生效。在 _app.js 中导入的任何样式都会全局应用于应用的所有页面。

如果未生效：请确保在更新 pages/_app.js 后重启开发服务器。

全局样式

重启开发服务器

添加全局 CSS

On this page