如何使用CSS模块的全局父选择器

Question

我在React应用程序中使用CSS模块.我还有一个带有一些全局样式的下拉组件(我很高兴,因为我想重复使用的一般样式).

当下拉列表处于活动状态时,将应用CSS类(.dropdown--active).有没有办法可以将全局类与我的组件的本地范围样式一起包含在内？也就是说,我想要的是:

.myClass {
  color: red;
}

:global .dropdown--active .myClass {
  color: blue;
}

但是,该语法使整个选择器全局化,这不是我所追求的:我希望.myClass将范围限定为组件.

Answer 1

只需在括号中包含所需的全局类：

:global(.dropdown--active) .myClass {
  color: blue;
}