CSS module `:hover .child` not working - reactjs

Question

I have the following scss:
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
padding: 3em;
.d-none {
display: inline-block !important;
}
}
&:hover .d-none {
display: inline-block !important;
}
}
On hover, I get the padding:3em but both the nested, and inline child rule didn't work, ie .d-none class wasn't overridden.
What's the right way of writing the rule with CSS module?
I'm trying out CSS module with CRA and custom-react-scripts with sass and modules turned on (REACT_APP_SASS_MODULES=true).
Or perhaps I should use styled components instead? Was trying to figure out which one to go for for react apps.

Answer 1

you can try this code to solve your problem
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 3em;
background: red;
&:hover {
&.d-none {
background: black;
color: #fff;
padding: 20px;
}
}
}
.d-none {
background: green;
color: #fff;
padding: 20px;
}
<div class="skillBox">
Parrent
<div class="d-none">Childred</div>
</div>
Exmaple :: https://codepen.io/anon/pen/yqQNJXCodePen

Answer 2

There's nothing wrong with your CSS. See the demo below.
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
.d-none{
display: none;
}
&:hover {
padding: 3em;
.d-none {
display: inline-block;
}
}
}
https://codepen.io/paulcredmond/pen/djQoow

Answer 3

In case if element with skillbox and d-none class are siblings below is the css for that
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
padding: 3em;
}
}
.dnone {
display: none;
}
.skillBox:hover ~ .dnone {
display: inline-block;
}
http://jsbin.com/hixamotuku/edit?html,css,output

Answer 4

So I realise CSS Modules created a customised classname for .d-none and applying that classname worked.
So I changed the classname altogether making it an entirely new class that overrides .d-none.
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
.dNone {
display: inline-block !important;
}
}
}
And applying by adding them as an array then joining them together:
<i className={['fas fa-times-circle d-none', styles.faTimesCircle, styles.dNone].join(' ')} onClick={this.onDelete} />