CherryFlavourPez CherryFlavourPez - 1 year ago 94
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 (

). 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
to be scoped to the component.

Answer Source

just include the desired global class in parens:

:global(.dropdown--active) .myClass {
  color: blue;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download