scoped样式无法覆盖Bootstrap 4原生JS组件，因其DOM挂载在document.body且无属性标记；:deep()仅穿透Vue子组件树，对JS动态插入节点无效；应改用带约束的全局样式或换用bootstrap-vue封装组件。
不能直接用 .btn 这类选择器写在 <style scoped> 里覆盖 Bootstrap 4 样式——scoped 会加属性标记，而 Bootstrap 4 的 JS 组件（如原生 modal、tooltip）动态插入到 document.body，节点不带这个标记，样式根本不会匹配。
为什么 :deep() 在 Vue 3 + Bootstrap 4 原生 JS 下基本无效
Bootstrap 4 的 JS（比如 bootstrap.bundle.js）创建的弹层、下拉菜单等，DOM 节点不在当前组件树内，而是挂载到 document.body。Vue 的 :deep() 只能穿透子组件的 Vue 渲染结构，对这种纯 JS 动态插入的节点完全无感知。
-
:deep(.modal)写在 scoped style 里 → 编译后仍是[data-v-xxx] .modal，但.modal元素没有data-v-xxx属性，不生效 - 即使你手动在组件里写
<div class="modal">，只要它没被 Vue 渲染（而是靠 JS 初始化），:deep()也管不了 - Vue 2 的
::v-deep或/deep/同样失效，原理一致
真正能生效的两种做法：全局样式 + 精准限定
必须放弃“只作用于本组件”的幻想，改用带约束的全局样式。关键不是“要不要全局”，而是“怎么控制影响范围”。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 把要覆盖的规则挪到
<style>（无scoped）块里，放在同一.vue文件中，避免污染其他组件 - 给 Bootstrap 组件加唯一标识：比如初始化 modal 时传
className: 'my-page-modal'，然后写.my-page-modal .modal-header { background: #3498db; } - 如果用的是 data-bs-* 触发的原生 modal，可在 mounted 钩子中动态加 class：
document.querySelector('.modal')?.classList.add('my-page-modal')，再配对应样式 - 不推荐往
document.head插<style>标签——容易重复插入、卸载时难清理
更干净的替代路径：换用 Vue 封装组件
如果你能接受模板语法变更，这是长期最省心的方案。Bootstrap 4 对应的 Vue 封装库是 bootstrap-vue（注意不是 bootstrap-vue-3，后者只适配 Bootstrap 5）。
立即学习“前端免费学习笔记（深入）”；
- 安装：
npm install bootstrap-vue bootstrap@4.6.3（锁定 Bootstrap 4 版本） - 注册插件后，所有组件如
<b-modal>、<b-dropdown>都由 Vue 渲染，DOM 在组件树内 - 此时
:deep(.modal-content)才真正有效，且可配合props控制行为，比原生 JS 更可控 - 注意：
bootstrap-vue不支持 Vue 3；若项目已是 Vue 3，这条路走不通，只能退回上一节的全局样式策略
最易被忽略的点：很多人试了 :deep() 没效果，就以为是写法错或版本问题，其实根本原因是 DOM 位置不对——先确认那个 .dropdown-menu 或 .tooltip 节点是不是真的在你组件的 $el 下，再决定用什么方式覆盖。
