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

Question

我正在使用 CSS Modules within a React application. I also have a dropdown component 一些全局样式（我很满意，因为我想重复使用一般样式）。

当下拉菜单处于活动状态时，将应用 CSS class (.dropdown--active)。有没有一种方法可以将全局 class 与组件的局部范围样式一起包含在内？也就是说，我想要的是让它起作用：

.myClass {
  color: red;
}

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

但是，该语法使整个选择器成为全局选择器，这不是我想要的：我希望 .myClass 限定在组件范围内。

Answer 1

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

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

How to use a global parent selector with CSS Modules