CSS module `:hover .child` not working

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.

I think your CSS looks correct. A word of advice - if you need to customise create-react-app to be happy working with it don't use create-react-app. You lose many of the benefits as soon as you go off piste with it. — Jed Richards, Aug 08 '18 at 15:04

score 1 · Answer 1 · answered Aug 09 '18 at 13:32

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/yqQNJX CodePen

score 0 · Answer 2 · answered Aug 08 '18 at 14:57

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

score 0 · Answer 3 · answered Aug 08 '18 at 15:04

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

score 0 · Answer 4 · answered Aug 08 '18 at 15:12

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} />

CSS module `:hover .child` not working

4 Answers4