0

我是 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>
  );
}

添加-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;

主页 在此处输入图像描述

其他页面 在此处输入图像描述

4

1 回答 1

0

您必须制作自定义 _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
于 2020-04-23T16:14:31.900 回答