0

私は NextJS を初めて使用し、グローバル スタイルを他のページに適用する際に問題が発生しています。グローバルセレクターの使い方が間違っていますか? 以下に、私の index.js と、グローバル スタイルがホームページにのみ適用されていることを示す 2 つの画像を含む 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;

ホームページ ここに画像の説明を入力

その他のページ ここに画像の説明を入力

4

1 に答える 1