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

【问题标题】：How to use a global parent selector with CSS Modules如何在 CSS 模块中使用全局父选择器
【发布时间】：2017-02-01 10:58:53
【问题描述】：

我在 React 应用程序中使用 CSS Modules。我还有一个 dropdown component 带有一些全局样式（我很满意，因为我想重复使用的一般样式）。

当下拉菜单处于活动状态时，将应用 CSS 类 (.dropdown--active)。有没有办法可以在组件的本地范围样式旁边包含该全局类？即，我希望它能够正常工作：

.myClass {
  color: red;
}

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

但是，该语法使整个选择器成为全局的，这不是我所追求的：我希望 .myClass 被限定为组件。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：