使用.modules时不应用样式的问题。在Next.js中

Question

我启动了一个Next.js 13应用程序，

我有一个main.modules. css文件

.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类。