As far as I can tell css-modules locally scope class selectors but not element selectors in from the component css file. This means that the GlobalSelectors example is slightly misleading since:
.root :global p {
...
}
and
.root p {
...
}
Both have the result of styling all the p tags inside the elements with the .root class applied. This is slightly surprising since the entire point of the example is to demonstrate how :global works.
Updating the example to use a, semantically meaningless, class makes things clearer for people going through the examples.
As far as I can tell the :global would be most useful if you were to be using css modules with an existing non-modular framework (perhaps like bootstrap) and you wanted to override some styles for your component. I might be way off base though.
As far as I can tell
css-modules
locally scope class selectors but not element selectors in from the component css file. This means that theGlobalSelectors
example is slightly misleading since:and
Both have the result of styling all the
p
tags inside the elements with the.root
class applied. This is slightly surprising since the entire point of the example is to demonstrate how:global
works.Updating the example to use a, semantically meaningless, class makes things clearer for people going through the examples.
As far as I can tell the
:global
would be most useful if you were to be using css modules with an existing non-modular framework (perhaps like bootstrap) and you wanted to override some styles for your component. I might be way off base though.