How to use a global parent selector with CSS Modules

Question

I'm using CSS Modules within a React application. I also have a dropdown component with some global styles (which I'm happy with, as the general styles I want to re-use).

When the dropdown is active, a CSS class is applied ( .dropdown--active ). Is there a way I can include that global class alongside my component's locally scoped styles? ie, what I'd like is for this to work:

.myClass {
  color: red;
}

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

However, that syntax makes the entire selector global, which is not what I'm after: I want .myClass to be scoped to the component.

Answer 1

just include the desired global class in parens:

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