CODEWITHSUNDEEP
reactjsbootstrap-modalreact-bootstrap
Shamoon
Shamoon

Reputation: 43511

react-bootstrap modal override class not working

I'm trying to remove the shadow on a react-bootstrap modal. My modal code is

  <Modal show={this.props.modalDetails}
    onHide={this.props.close}
    animation={false}
    dialogClassName='trade-detail-dialog'
  >
    <Modal.Header closeButton>
      <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <h4>Text in a modal</h4>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

      <hr />
    </Modal.Body>
    <Modal.Footer>
      <Button onClick={this.props.close}>Close</Button>
    </Modal.Footer>
  </Modal>

My CSS is

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

}

But the modal still has a box shadow:

enter image description here

Apparently my styles are not important, no matter how much I want them to be: enter image description here

Any idea on how I can remove the shadow?

Upvotes: 1

Views: 1638

Answers (1)

hendrixchord
hendrixchord

Reputation: 5434

Your css properties are invalid.

It should be

box-shadow: none;
-webkit-box-shadow: none;

Upvotes: 4

Related Questions