.modules の使用時にスタイルが適用されない問題。 Next.js 内

Question

Next.js 13 アプリケーションを起動しました。

main.modules.css ファイルがあります

;

.Heading {
    フォントサイズ: 4rem;
    色: #000;
}

.dark .Heading {
    色: #fff;
}

このようなコンポーネントのスタイルを設定するために使用します

「@/styles/main.module.scss」からスタイルをインポートします。

デフォルト関数 Home() をエクスポート {
    戻る （
        <>
            <ヘッダー/>
            <h1 className={styles["Heading"]}>こんにちは!私は scss</h1> によってスタイル設定されました。
        </>
    );
}

から。見出しクラスのスタイルは正しく適用されますが、 dark .Heading には属性がありません。

私のテーマプロバイダーは HTML 要素にテーマを追加します。暗いカテゴリー。

私は普通のものを使いました。 scss ファイルを開き、次のようなクラスを適用します

<h1 className="Heading">こんにちは!私は scss</h1>

によってスタイル設定されました。

その後、うまくいきました

Answer 1

スタイルを使用してみることができます。タイトル。 < h1 className = {styles.Heading} >こんにちは! 私のスタイルは scss です</h1>

Answer 2

:global を使用して、グローバル クラスを使用していることを宣言できます

それでメインです。モジュール。 scss は

# になります リーリー

なぜこれが起こっているのですか?

なぜこれが起こっているのですか?
CSS モジュールの範囲は、使用するコンポーネントです。

これはデフォルトを意味します。ダーク セレクターはコンパイルされ、グローバル セレクターは参照されません。暗いカテゴリー。