CSS Modules & ReactJS: Parent and child CSS classes in different components

Question

So I am building a react application and have a quick question. If I have two separate components: and with CSS classes navigation.css and navigationLogo.css respectively. In navigation.css I have a class named .main and in navigationLogo.css I want to have a class like so:

.main .main_in_logo {
 color: red;
}

But with CSS Modules I am unable to do this, any ideas on a work around?

Answer 1

I just feel that the explanations here are not complete enough. In css you do .parentSelector .childSelector in order to select the child. The same rule is for css modules, but in your html/jsx you should add to the parent and the child the relevant className -> styles.parentSelector , styles.childSelector.

<div className={styles.container}>text</div>

This way you can have in your css something like:

.banner .container{
background-color:reb;
}
.banner .container{
background-color:blue;
}

Sometimes you use libraries and you want to change something somewhere down the DOM inside the library and you can't change its source code. In this case you can use the :global like this:

.parentElement :global(div)
.parentElement :global(#some-lib-element-selector)