Javascript CSS模块声明没有'；如果我在一个特定的身体类别上引用它，它就不起作用

我不熟悉React和Gatsby.js。我正在和盖茨比建立一个博客，我的博客有一个开关，可以在明暗模式之间切换。我通过使用JavaScript切换

标记上的类来实现这一点。基本上，如果是浅模式，标签将是

，如果是暗模式，标签将是

通过使用香草JavaScript设置和删除

标记上的

.darkMode

类，我成功地实现了这一点。但是，我在CSS模块中基于

body.darkMode

设置元素样式时遇到了一些问题

在index.module.css文件中，我有以下类：

.section {
  color: #141414;
}

body.darkMode .section {
  color: #ebebeb;
}

在我的index.js组件中，我导入了CSS模块并应用了如下样式：

---

虽然

.section

类中的color属性起作用，但我注意到当我将

.darkMode

CSS类添加到

标记时，

body.darkMode.section

声明不起作用。为什么会这样？谢谢你的帮助。谢谢。

如果您想在黑暗和光明模式之间切换，请参阅此代码

var checkbox=document.querySelector（'input[name=mode]”）；
checkbox.addEventListener（'change'，function（））{
如果（选中此项）{
反式
document.documentElement.setAttribute（'data-theme'，'dark'）
}否则{
反式
document.documentElement.setAttribute（'data-theme'，'light'）
}
})
让trans=（）=>{
document.documentElement.classList.add（'transition'）；
window.setTimeout（（）=>{
document.documentElement.classList.remove（'transition'）；
}, 1000)
}

@导入url（“https://fonts.googleapis.com/css?family=Poppins:300，400900&display=swap”）；
html{
宽度：100%；
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
背景：var（--lightBg）；
--lightBtn:#FE016C；
--lightBg:#fff；
--浅色：#232323；
}
html[data-theme='dark']{
背景：var（--lightBg）；
--lightBtn:#FFBD07；
--lightBg:#2323；
--浅色：#fff；
}
h1{
字体系列：“Poppins”，无衬线；
字体大小：300；
颜色：var（--lightColor）；
}
输入[类型=复选框]{
身高：0；
宽度：0；
可见性：隐藏；
}
标签{
光标：指针；
文本缩进：-9999px；
宽度：55px；
高度：30px；
背景：var（--lightBtn）；
保证金：0自动；
显示器：flex；
证明内容：中心；
对齐项目：居中；
-webkit边界半径：100px；
-moz边界半径：100px；
边界半径：100px；
位置：相对位置；
}
标签：后{
内容：''；
背景：#fff；
宽度：20px；
高度：20px；
-webkit边界半径：50%；
-moz边界半径：50%；
边界半径：50%；
位置：绝对位置；
顶部：5px；
左：4px；
-webkit转换：轻松输入输出200ms；
-moz转换：在200ms内放松；
-ms转换：在200ms内轻松输入输出；
-o型转换：输入输出200ms；
过渡：缓进缓出200ms；
}
输入：选中+标签{
背景:#FFBD07；
}
输入：选中+标签：之后{
左：计算（100%-5px）；
-webkit转换：translateX（-100%）；
-moz变换：translateX（-100%）；
-ms转换：translateX（-100%）；
-o-转换：translateX（-100%）；
转化：translateX（-100%）；
}
html.transition，
html.transition*，
html.transition*：在，
html.transition*：在{
-webkit过渡：轻松输入输出200ms！重要；
-moz转换：轻松输入输出200ms！重要；
-ms转换：轻松输入输出200ms！重要；
-o型过渡：在200ms内轻松进出！重要；
过渡：轻松进入200毫秒！重要；
转换延迟：0！重要；
}

亮/暗模式
切换

我想出了解决办法。结果是，盖茨比正在将

body.darkMode.section

编译成一些任意的类名。实际上，我希望它忽略

body.darkMode

，但引用

部分的本地生成类名

我在这里找到了答案-。我能够通过将原始CSS转换为以下内容来解决我的具体问题：

.section {
  color: #141414;
}

body:global(.darkMode) :local(.section) {
  color: #ebebeb;
}

如您所见，：global和：local选择器允许您正确地定位HTML。
您能从开发工具中显示在暗模式下应用于节的样式吗？结果是，
body.darkMode.section
行也被编译成一个长类名，如
darkMode:“index module--darkMode--3BMQh”
。有没有办法阻止盖茨比将特定的CSS声明转换成自己的随机类名？@Zlatko I设法解决了这个问题。在这个帖子里看到我的答案。谢谢