Isu dengan gaya tidak digunakan apabila menggunakan .modul. Dalam Next.js

Question

Saya melancarkan aplikasi Next.js 13,

Saya mempunyai fail.modules.css utama

< ;/code> ;

.heading {
    saiz fon: 4rem;
    warna: #000;
}

.gelap .tajuk {
    warna: #fff;
}

Saya menggunakannya untuk menggayakan komponen seperti ini

import gaya daripada "@/styles/main.module.scss";

eksport fungsi lalai Laman Utama() {
    kembali (
        <>
            <Pengepala />
            <h1 className={styles["heading"]}>Hai saya telah digayakan oleh scss</h1>
        </>
    );
}

Daripada. Gaya untuk kelas tajuk digunakan dengan betul, tetapi dari. Atribut dark .heading tidak mempunyai.

Pembekal tema saya memang menambah satu pada elemen HTML. kategori gelap.

Saya menggunakan yang biasa. scss fail dan gunakan kelas seperti ini

<h1 className="heading">Hai saya telah digayakan oleh scss</h1>

Kemudian ia berfungsi dengan baik

Answer 1

Anda boleh cuba menggunakan gaya. tajuk. <h1 className = {styles.heading} >Gaya saya ialah scss</h1>

Answer 2

Anda boleh menggunakan :global untuk mengisytiharkan bahawa anda menggunakan kelas global

sangat utama. modul. scss akan menjadi

.heading {
    font-size: 4rem;
    color: #000;
}

:global(.dark) .heading {
    color: #fff;
}

Mengapa ini berlaku?

Mengapa ini berlaku?
Skop modul CSS ialah komponen yang mereka gunakan.

Ini bermakna secara lalai. Pemilih gelap akan disusun dan tidak akan merujuk yang global. kategori gelap.