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;