CSS Modules: selecting child class through selectors

Question

So,

I have appended a home class to body like so:

 document.body.classList.add("home")

I want to select appContainer a child element of body class by doing

html body.home #appContainer { ..... }

This works without CSS Modules but was wondering how I can do it with CSS modules. Thanks

Answer 1

You need to use wrap the class that you want to be global into :global(). If your selector uses an element you must write it directly after the element with no space in between, like element:global(.class) which translates into element.class.

Therefore, in your case html body:global(.home) #appContainer is the answer.

Answer 2

For anyone else that comes across this issue, I am using postcss-preset-env and I had to do this:

Worked ✅

.toolTipTest :global .rc-tooltip-arrow {
  color: blue;
}

This did not work ❌

.toolTipTest:global(.rc-tooltip-arrow) {
  color: blue;
}

And neither did this ❌

.toolTipTest:global(.rc-tooltip-arrow) {
  color: blue;
}
// Neither Did this
.toolTipTest {
  &:global(.rc-tooltip-arrow) {
    color: blue;
  }
}