Problème avec les styles qui ne sont pas appliqués lors de l'utilisation de .modules. Dans Next.js

Question

J'ai lancé une application Next.js 13,

J'ai un fichier main.modules.css

;

.heading {
    taille de police : 4rem ;
    couleur : #000 ;
}

.dark .heading {
    couleur : #fff ;
}</pré>
<p>Je l'utilise pour styliser des composants comme celui-ci</p>
<pre class="brush:php;toolbar:false;">importer les styles depuis "@/styles/main.module.scss" ;

exporter la fonction par défaut Home() {
    retour (
        ≪>
            <En-tête />
            <h1 className={styles["heading"]}>Salut ! J'ai été stylé par scss</h1>
        ≪/>
    );
}</pré>
<p>De. Les styles de la classe de titre sont appliqués correctement, mais à partir de. L'attribut dark .heading n'a pas. <br /><br />Mon fournisseur de thème en ajoute un à l'élément HTML. catégorie sombre. <br /><br />J'en ai utilisé un normal. scss et appliquez une classe comme celle-ci</p><p><br /></p>
<pre class="brush:php;toolbar:false;"><h1 className="heading">Salut ! J'ai été stylé par scss</h1>

Ensuite, tout a bien fonctionné

Answer 1

Vous pouvez essayer d'utiliser des styles. titre. <h1 className = {styles.heading} >Bonjour ! Mon style est scss</h1>

Answer 2

Vous pouvez utiliser :global pour déclarer que vous utilisez une classe globale

donc main. modules. scss deviendra

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

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

Pourquoi cela se produit-il ?

Pourquoi cela se produit-il ?
La portée des modules CSS est le composant qu'ils utilisent.

Cela signifie par défaut. Le sélecteur sombre sera compilé et ne fera pas référence au sélecteur global. catégorie sombre.