title: react-bootstrap modal override class not working
body: <p>I'm trying to remove the shadow on a <code>react-bootstrap</code> modal. My modal code is</p>
  
  <pre><code>  &lt;Modal show={this.props.modalDetails}
      onHide={this.props.close}
      animation={false}
      dialogClassName='trade-detail-dialog'
    &gt;
      &lt;Modal.Header closeButton&gt;
        &lt;Modal.Title&gt;Modal heading&lt;/Modal.Title&gt;
      &lt;/Modal.Header&gt;
      &lt;Modal.Body&gt;
        &lt;h4&gt;Text in a modal&lt;/h4&gt;
        &lt;p&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
  
        &lt;hr /&gt;
      &lt;/Modal.Body&gt;
      &lt;Modal.Footer&gt;
        &lt;Button onClick={this.props.close}&gt;Close&lt;/Button&gt;
      &lt;/Modal.Footer&gt;
    &lt;/Modal&gt;
  </code></pre>
  
  <p>My CSS is</p>
  
  <pre><code>div.trade-detail-dialog div.modal-content {
    box-shadow: 0 !important;
    -webkit-box-shadow: 0 !important;
  }
  
  
  @media (min-width: 768px) {
    div.trade-detail-dialog div.modal-content {
      box-shadow: 0 !important;
      -webkit-box-shadow: 0 !important;
    }
  
  }
  </code></pre>
  
  <p>But the modal still has a box shadow:</p>
  
  <p><a href="https://i.stack.imgur.com/Rpvle.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rpvle.png" alt="enter image description here"></a></p>
  
  <p>Apparently my styles are not important, no matter how much I want them to be:
  <a href="https://i.stack.imgur.com/UeB7e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UeB7e.png" alt="enter image description here"></a></p>
  
  <p>Any idea on how I can remove the shadow?</p>