使用.modules時不套用樣式的問題。在Next.js中

Question

我啟動了一個Next.js 13應用程序，

我有一個main.modules. css檔

< ;/code>

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

.dark .heading {
    color: #fff;
}

我用它來設定這樣的元件樣式

import styles from "@/styles/main.module.scss";

export default function Home() {
    return (
        <>
            <Header />
            <h1 className={styles["heading"]}>Hi! I was styled by scss</h1>
        </>
    );
}

來自。 heading類別的樣式被正確應用，但來自。 dark .heading的屬性沒有。

我的主題提供者確實為HTML元素添加了一個。 dark類。

我用了普通的。 scss文件，並應用了一個類似這樣的類別

<h1 className="heading">Hi! I was styled by scss</h1>

然後它工作得很好

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類。