反应样式引导模态

Question

我想添加样式我的模态所以它具有（使模态成为屏幕的整个宽度并将其推向屏幕）：

width: "100%,
top: "25px

到

<div class="modal-dialog" role="document">

因为它出现在常规引导模式（http://getbootstrap.com/javascript/#modals）上，或者当使用react-bootstrap时，div是

<div class="custom-modal modal-lg modal-dialog">

但是看看react-bootstrap网站，（https://react-bootstrap.github.io/components.html#modals）我们也只能访问

<Modal/>
<Modal.Header/>
<Modal.Body/>

并将那些CSS设置应用于那些不会给我样式即时寻找

的人

Answer 1

如果您查看Props部分的模态，它会解释可以为每个模式设置哪些自定义（Modal，Modal.Header，Modal.Body）。

例如，要向custom-modal元素添加modal-dialog类，可以设置属性dialogClassName：

<Modal dialogClassName="custom-modal">
    //Modal content goes here
</Modal>

Property documentation

Example with custom css class