Comment utiliser un sélecteur parent global avec des modules CSS

Question

J'utilise CSS Modules dans une application React. J'ai aussi un dropdown component avec quelques styles globaux (dont je suis content, comme les styles généraux que je veux réutiliser). Lorsque la liste déroulante est active, une classe CSS est appliquée (.dropdown--active). Est-il possible d'inclure cette classe globale aux côtés des styles de portée locale de mon composant? à savoir ce que je voudrais est pour que cela fonctionne:

.myClass { 
    color: red; 
} 

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

Cependant, cette syntaxe rend l'ensemble du sélecteur global, ce qui est pas ce que je suis après: Je veux .myClass vous limiter à la composante.

Answer 1

Il suffit d'inclure la classe mondiale souhaitée dans parens:

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