章节16

全局样式

CSS Modules 对于组件级样式很有用。但是如果你想让某些 CSS 被 **每个页面** 加载，Next.js 也支持。

要将全局 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 文件。你 **不能** 在其他任何地方导入全局 CSS。

不能在 pages/_app.js 之外导入全局 CSS 的原因是全局 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} />;
}

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

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

全局样式

重启开发服务器

添加全局 CSS

您已完成本章16