根本原因是CSS层叠规则在React开发环境下被放大：Bootstrap全局注入、选择器特异性低但数量庞大，且热更新可能导致“后加载但先执行”的错觉；需通过CSS Modules、data属性限定或SCSS按需导入实现可控隔离。
为什么自定义CSS总被Bootstrap覆盖
根本原因不是“没写对”，而是CSS层叠规则在React开发环境下被放大了：Bootstrap的类选择器（如.btn、.form-control）特异性低但数量庞大，且通过import 'bootstrap/dist/css/bootstrap.min.css'全局注入，一旦你的自定义样式文件加载稍早、或选择器特异性不够（比如只用.my-button），就会立刻失效。
更隐蔽的问题是开发服务器（如CRA的webpack-dev-server）对CSS模块的热更新机制——它可能把Bootstrap样式插入到style标签末尾，而你的组件级CSS（比如Button.module.css）却在之前已挂载，导致“后加载但先执行”的错觉。
避免全局污染的三种实操路径
不要指望靠!important硬顶，那只是掩盖问题。真正可控的方式就这三条：
- 用CSS Modules：给组件文件命名为
Button.module.css，在JSX中className={styles.primary}引用，类名自动哈希，彻底隔离 - 用
data-*属性限定作用域：在父容器加data-theme="myapp"，然后写[data-theme="myapp"] .btn { border-radius: 6px; }，不依赖类名顺序 - 改用
bootstrap/scss源码 + 自定义变量：删掉bootstrap.min.css引入，改用@import '~bootstrap/scss/functions';等按需导入，并在$enable-global-styles: false下关闭默认重置，只保留你需要的模块
npm安装比CDN更易控样式的真相
CDN引入（<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">）看似简单，实则埋雷：
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
- 无法禁用不需要的组件（比如你不用
carousel，但它CSS仍会加载并干扰.slide类） - 版本升级完全不可控，某次CDN缓存更新可能悄悄引入新类名（如
form-switch在Bootstrap 5.2+才稳定） - Webpack无法对其做postcss处理（比如自动添加
autoprefixer或postcss-custom-properties）
而npm install bootstrap后，你可以直接import './custom.scss'，并在其中@forward 'bootstrap/scss/buttons' with ($btn-padding-y: 0.4rem);，所有定制都在代码里可追踪。
容易被忽略的“伪污染”：JS组件初始化时机
很多人以为样式污染只发生在CSS层，其实Bootstrap JS组件（如Modal、Dropdown）调用new bootstrap.Modal()时，会动态往DOM加class（如modal-open加在body上），这些全局class会意外影响你其他组件的布局或z-index。
解决办法很具体：
- 永远用
useRef绑定实例，不用data-bs-toggle自动初始化 - 在
useEffectcleanup里调用modal.dispose()，防止残留class - 如果必须用
body级class，提前在index.html的上加data-app="my-react-app"，然后所有自定义样式都写成body[data-app="my-react-app"] .modal-open { overflow: hidden; }
真正难缠的从来不是“怎么覆盖Bootstrap”，而是“怎么让Bootstrap别动我的地盘”。控制入口、限定范围、切断自动行为——这三件事做完，污染自然消失。
