如何在Next.js CSS Modules中为哈希类设置全局变体样式？

你之前的写法问题出在&和:global()之间多了空格，导致编译成了后代选择器，而不是你需要的同一元素的多类选择器。

正确的SCSS写法： #

.text {
  background: black;
  // 去掉&与:global之间的空格，实现同一元素的类组合
  &:global(.background--red) {
    background: red;
  }
}

注意：这里的.text要和你JSX里styles["text"]对应的类名完全一致，这样编译后才会关联上带哈希的类。

编译后的输出： #

会生成你期望的格式：

.styles_text__[HASH].background--red {
  background: red;
}

你的JSX写法是正确的，无需修改：

<div className={`${styles["text"]} background--red`}>
    <h1>Lorem ipsum</h1>
</div>

关键说明： #

• &在SCSS嵌套中代表当前父选择器，也就是编译后的带哈希的.styles_text__[HASH]
• :global()包裹的类名不会被CSS Modules哈希化，保持原名称background--red
• 两者直接相连（无空格）表示同一元素同时拥有这两个类时应用样式，这才是你需要的逻辑

内容的提问来源于stack exchange，提问作者Jonas