章节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。

全局 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

您已完成章节16