CSS 模块：通过选择器选择子类答案

【问题标题】：CSS Modules: selecting child class through selectorsCSS 模块：通过选择器选择子类
【发布时间】：2022-04-15 00:28:24
【问题描述】：

所以，

我在 body 中添加了一个 home 类，如下所示：

 document.body.classList.add("home")

我想通过做来选择appContainer一个body类的子元素

html body.home #appContainer { ..... }

这可以在没有 CSS 模块的情况下工作，但我想知道如何使用 CSS 模块来做到这一点。谢谢

【问题讨论】：

【解决方案1】：

您需要使用将要成为全局的类包装到:global() 中。如果你的选择器使用了一个元素，你必须直接写在元素之后，中间没有空格，比如element:global(.class)，它转换成element.class。

因此，在您的情况下，html body:global(.home) #appContainer 就是答案。

【讨论】：

【解决方案2】：

对于遇到此问题的其他人，我使用的是postcss-preset-env，我必须这样做：

工作✅

.toolTipTest :global .rc-tooltip-arrow {
  color: blue;
}

这不起作用❌

.toolTipTest:global(.rc-tooltip-arrow) {
  color: blue;
}

这也没有❌

.toolTipTest:global(.rc-tooltip-arrow) {
  color: blue;
}
// Neither Did this
.toolTipTest {
  &:global(.rc-tooltip-arrow) {
    color: blue;
  }
}

【讨论】：