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