如何解决React中reactstrap Modal自定义样式不生效问题

我来帮你搞定这个问题～你遇到的情况很常见，主要是因为reactstrap的Modal组件对类名的传递有特定的属性，咱们一步步来解决：

问题根源 #

你把自定义类modal-dialog加到了<Modal>组件的className属性上，但reactstrap的className是作用在最外层的.modal容器上，而不是你想要修改的内部.modal-dialog元素。所以你的CSS样式并没有应用到正确的DOM节点上，自然看不到效果。

解决方案一：使用dialogClassName属性（推荐） #

reactstrap专门为Modal提供了dialogClassName属性，用来给内部的.modal-dialog元素添加自定义类名。修改你的Modal代码：

<Modal 
  dialogClassName="custom-modal-dialog" 
  isOpen={this.state.modal} 
  fade={false} 
  toggle={this.toggle} 
>

然后更新你的CSS：

.custom-modal-dialog {
  width: 100%;
  margin-top: 10%;
}

这样样式就会精准作用到弹窗的dialog容器上了。

解决方案二：使用更具体的CSS选择器 #

如果不想修改组件属性，也可以通过更具体的选择器来定位到目标元素，比如：

.modal .modal-dialog {
  width: 100%;
  margin-top: 10%;
}

这个选择器会选中所有.modal容器下的.modal-dialog元素，覆盖默认样式。

额外排查点 #

• 检查你的CSS文件名拼写：你导入的是./Dashbord.css，是不是应该是Dashboard.css？如果文件名不对，样式也不会生效哦。
• 如果样式还是被覆盖，可以尝试暂时添加!important来测试（不推荐长期使用，优先提升选择器优先级）：

  .custom-modal-dialog {
    width: 100% !important;
    margin-top: 10% !important;
  }
  

试试上面的方法，应该就能解决你的问题啦～

内容的提问来源于stack exchange，提问作者dwp