How to use global parent selector with CSS modules

Question

I use CSS modules in a React application. I also have a dropdown component with some global styles (which I am pleased with as common styles that I want to reuse).

When the dropdown is active, the CSS ( .dropdown--active) class is applied . Is there any way to include this global class along with my locally restricted style components? that is, I want this to work:

.myClass {
  color: red;
}

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

However, this syntax makes the entire selector global, which is not what I need: I want to .myClassbe bound to the component.

Answer 1

just specify the desired global class in parens:

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