Problem mit Stilen, die bei der Verwendung von .modules nicht angewendet werden. In Next.js

Question

Ich habe eine Next.js 13-Anwendung gestartet,

Ich habe eine main.modules.css-Datei

< ;/code> ;

.heading {
    Schriftgröße: 4rem;
    Farbe: #000;
}

.dark .heading {
    Farbe: #fff;
}

Ich verwende es, um Komponenten wie diese zu formatieren

Stile importieren aus „@/styles/main.module.scss“;

Standardfunktion Home() exportieren {
    zurückkehren (
        <>
            <Kopfzeile />
            <h1 className={styles["heading"]}>Hallo, ich wurde von scss</h1>
        </>
    );
}

Von. Die Stile für die Überschriftenklasse werden korrekt angewendet, jedoch von. Das Attribut dark .heading hat nicht.

Mein Theme-Anbieter fügt dem HTML-Element eines hinzu. dunkle Kategorie.

Ich habe ein normales verwendet. scss-Datei und wenden Sie eine Klasse wie diese an

<h1 className="heading">Hallo, ich wurde von scss</h1>

Dann hat es gut funktioniert

Answer 1

你可以尝试使用样式。标题。< h1 className = {styles.heading} >你好!我的样式是scss</h1>

Answer 2

你可以使用:global来声明你正在使用一个全局类

所以main。modules。scss将变成

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

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

为什么会这样呢?

为什么会这样呢?
CSS模块的作用域是它们所使用的组件。

这意味着默认情况下。dark选择器会被编译，并且不会引用全局的。dark类。