CherryFlavourPez CherryFlavourPez - 2 months ago 20
CSS Question

How to use a global parent selector with CSS Modules

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? i.e., 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

just include the desired global class in parens:

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