在 Next Js 中使用全局自定义样式表答案

【问题标题】：Using global custom style sheet in Next Js在 Next Js 中使用全局自定义样式表
【发布时间】：2020-03-13 05:17:24
【问题描述】：

要导入 css 文件，我可以在 'pages/_app.js' 中执行以下操作：

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

很简单。据我了解，这覆盖了具有全局 css 的 App 组件。

文档说：

Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:

但是，当我第一次使用 Next Js 初始化应用程序时，我得到了一个 pages/index.js 的根页面这包含我的启动页面。这里没有 app.js 文件或 App 组件。

我对如何将 App 组件集成到常规 index.js 文件中感到困惑。

我的问题是： pages/_app.js 是否自动包裹在 pages/index.js 周围？还是我必须将 myApp 组件导入 pages/index.js 文件？

【问题讨论】：

标签： next.js

【解决方案1】：

我的问题是：pages/_app.js 是否会自动包裹 pages/index.js？还是我必须将 myApp 组件导入 pages/index.js 文件？

是的，next.js 会使用_app.js 中定义的组件自动包装您的应用程序。如果您没有该文件，next.js 将使用其默认值。

在_app.js 中定义您的 App 组件时，您需要遵循特定的模式。您可以在此处查看如何设置自定义 App 组件：https://nextjs.org/docs/advanced-features/custom-app

【讨论】：