全局样式不适用于其他页面（Next.JS）？答案

【问题标题】：Gloabl styles are not applying to other pages (Next.JS)?全局样式不适用于其他页面（Next.JS）？
【发布时间】：2020-04-24 00:14:31
【问题描述】：

我是 NextJS 的新手，在获取全局样式以应用于其他页面时遇到问题。我是否使用了错误的全局选择器？您可以在下面找到我的 index.js 和 add-article.js 文件，其中包含两个显示全局样式的图像，仅应用于主页。

下面是我的 index.js 文件：

import Head from 'next/head';

import Navigation from '../components/navigation';

export default function ArticleList() {
  return (
    <div className='container'>
      <Head>
        <title>Article Vault</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <div className='home-container'>
        <Navigation />
        <p>Home Page</p>
      </div>

      <style jsx>{``}</style>

      <style jsx global>{`
        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;
        }

        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

add-article.js

import Navigation from '../components/navigation';

const AddArticle = () => {
  return (
    <div className='add-article-container'>
      <Navigation />
      <p>Add Article Page</p>
    </div>
  );
};

export default AddArticle;

主页

其他页面

【问题讨论】：

标签： next.js css-in-js

【解决方案1】：

您必须制作自定义 _app.js 才能使其正常工作。在此处导入您的样式而不是 index.js 并制作包装器。作为替代方案，还可以进行全局布局并将您的页面组件作为子组件传递。

   // import App from 'next/app' function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp

【讨论】：