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

How to use a global parent selector with CSS Modules

本文关键字：全局 选择器 CSS 模块      更新时间：2023-09-26

我在React应用程序中使用CSS模块。我还有一个带有一些全局样式的下拉组件(我很满意，因为我想重用的一般样式)。

当下拉菜单激活时，应用一个CSS类(.dropdown--active)。是否有一种方法可以将全局类与组件的局部作用域样式一起包含?也就是说，我想让它工作:

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

但是，这种语法使整个选择器全局，这不是我想要的:我希望.myClass的作用域为组件。

只需在parent中包含所需的全局类:

:global(.dropdown--active) .myClass {
  color: blue;
}
相关文章：