如何调整react-bootstrap Modal组件宽度？自定义样式不生效如何解决？

你写的样式没有生效有两个常见原因，一是缺了max-width配置，二是自定义CSS优先级低于Bootstrap默认样式被覆盖，按下面步骤排查即可：

• 第一步：修改自定义CSS，补充max-width配置
  Bootstrap的Modal对话框默认在不同响应式断点下设置了固定的max-width，仅设置width不会生效，需要同时覆盖max-width属性：

.modal-90w{
    width: 90%;
    max-width: 90% !important;
}

如果不想用!important，只要保证你的自定义CSS文件的引入顺序在Bootstrap全局CSS之后即可，后加载的样式优先级更高。

• 第二步：排查CSS模块化配置
  如果你的项目开启了CSS Modules处理样式文件，直接传字符串类名无法匹配编译后的类名，需要改为用导入的样式对象传值：

// 导入方式改为引入样式对象
import styles from '../CSS/Header.css'

// Modal组件的dialogClassName属性修改为
<Modal 
  dialogClassName={styles["modal-90w"]}
  // 其他属性保持不变
>

• 第三步：验证生效情况
  修改后重启开发服务，打开浏览器开发者工具检查Modal外层dialog元素的类名和样式，确认自定义样式已经被应用没有被划掉即可。

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