CODEWITHSUNDEEP
javascriptcssreactjscss-modules
CherryFlavourPez
CherryFlavourPez

Reputation: 7487

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.

Upvotes: 14

Views: 15229

Answers (1)

Pascal Duez
Pascal Duez

Reputation: 691

just include the desired global class in parens:

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

Upvotes: 28

Related Questions