Problème avec les styles qui ne sont pas appliqués lors de l'utilisation de .modules. Dans Next.js
P粉504080992
P粉504080992 2023-08-02 20:50:39
0
2
531
<p>J'ai lancé une application Next.js 13,<br /><br />J'ai un fichier main.modules.css</p><p><code></code> ;</p> <pre class="brush:php;toolbar:false;">.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></pre> <p>Ensuite, tout a bien fonctionné</p>
P粉504080992
P粉504080992

répondre à tous(2)
P粉111227898

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

P粉787806024

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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal