react-bootstrap模态覆盖类不起作用

Question

我正在尝试移除react-bootstrap模态上的阴影。我的模态代码是

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

我的CSS是

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

}

但是模态仍然有一个盒子阴影：

显然我的风格并不重要，无论我多么想要它们：

关于如何移除阴影的任何想法？

Answer 1

您的css属性无效。

应该是

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