CSS 模块：通过选择器选择子 class

Question

所以，

我像这样在正文中添加了一个家 class:

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

我想 select appContainer 是 body class 的子元素，方法是

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

这可以在没有 CSS 模块的情况下工作，但想知道如何使用 CSS 模块来实现。谢谢

Answer 1

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

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

Answer 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;
  }
}

CSS Modules: selecting child class through selectors