DEV Community

Discussion on: Selecting elements in children components within CSS modules

Collapse
 
sgarrity profile image
Steven Garrity

This was super helpful - thanks for taking the time to write it up.

I wasn't immediately able to understand the technique you mention from @alemesa and @donghyukjacobjang of using "an un-scoped normal string class."

I was trying something like this and it was failing me. I've since learned that to keep CSS Modules from also adding the unique modifier to the normal string class you're trying to reference, you need to explicitly tell CSS Modules to leave that class alone with the :global() modifier.

For example, if you have an element with a CSS Modules class .foo with a child element with a normal static string CSS class .bar, then you'd need to do the following:

.foo :global(.bar)  { 🎨 }
Enter fullscreen mode Exit fullscreen mode

Thanks again for the helpful post.

Collapse
 
darryl profile image
Darryl Young

Thank you, Steven. That really helped with an issue I was just having.