Problème avec les styles qui ne sont pas appliqués lors de l'utilisation de .modules. Dans Next.js
P粉504080992
2023-08-02 20:50:39
<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>
Vous pouvez essayer d'utiliser des styles. titre. <h1 className = {styles.heading} >Bonjour ! Mon style est scss</h1>
Vous pouvez utiliser :global pour déclarer que vous utilisez une classe globale
donc main. modules. scss deviendra
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.