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

Question

我正在React应用中使用CSS模块。同时，我也有一个下拉菜单组件，其中包含一些全局样式（因为我很满意这些通用样式并希望重复使用）。

当下拉菜单激活时，会应用CSS类（.dropdown--active）。是否有办法将该全局类与我的组件本地作用域样式一起使用？也就是说，我希望实现以下效果：

.myClass {
  color: red;
}

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

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

- CherryFlavourPez

Answer 1

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

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

- Pascal Duez

---

太简单了！谢谢，不确定我在文档中是如何错过这个（https://github.com/css-modules/css-modules#exceptions）的。 - CherryFlavourPez