Bootstrap CSS变量默认全局生效，因其全部定义在:root；需用data-bs-theme或自定义class包裹组件来隔离作用域，确保样式表加载在Bootstrap之后，并避免漏设被引用的中间变量。
Bootstrap CSS变量作用域为何默认全局生效
因为 bootstrap 5+ 的 css 变量（如 --bs-primary、--bs-body-color）全部定义在 :root，浏览器天然只认一个 :root，所以改了就全站生效。这不是 bug，是 css 机制决定的——变量没有“局部作用域”概念，除非你主动创建新作用域边界。
用 data-bs-theme 或自定义 class 包裹组件实现变量隔离
最轻量、最可控的方式：不改 Bootstrap 源码，也不 hack :root，而是把组件包进一个带唯一标识的容器里，再用属性选择器重写变量值。Bootstrap 官方其实预留了这个口子（比如 data-bs-theme="dark" 就是这么工作的）。
实操建议：
- 给目标组件外层加一个稳定、语义清晰的 class，比如
class="my-card-widget"，避免用随机 ID 或内联 style - 在 CSS 中用
.my-card-widget作为前缀重设变量，例如：.my-card-widget { --bs-primary: #6f42c1; --bs-border-color: #e0d6ff; } - 确保该样式表加载顺序在 Bootstrap 主 CSS 之后，否则会被覆盖
- 别用
!important——CSS 变量本身不支持!important，写了也无效
为什么不用 style 属性或 useState 动态设变量
行内 style="--bs-primary: red" 看似简单，但会污染元素自身，且无法向下继承给子组件（比如 .btn 内部用 var(--bs-primary)，但父元素的 style 不会透传给它）。React 中用 useState 更新 style 更是徒劳——变量必须挂载到有子树的容器节点上才有效。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 按钮颜色没变，但控制台能看到父 div 的
style里写了变量 → 实际未继承 - 局部主题切换后，下拉菜单、tooltip 等 Portal 渲染的弹出层仍用全局变量 → 因为它们脱离了原 DOM 树
- 用
document.documentElement.style.setProperty()改:root→ 全站变，不是“组件内”
兼容性与性能注意点
CSS 变量本身兼容到 Chrome 49+/Firefox 31+/Safari 9.1+，但 Bootstrap 5.3+ 的部分 utility（如 text-opacity）依赖变量链式计算，若你在局部覆盖时漏掉某个中间变量（比如只改 --bs-primary 却没同步改 --bs-primary-rgb），可能导致颜色失效或降级成默认灰。
关键提醒：
- 查 Bootstrap 源码里的
scss/_variables.scss，确认你要覆盖的变量是否被其他变量引用（比如--bs-primary-rgb常用于rgba(var(--bs-primary-rgb), .5)） - 避免在高频更新的组件（如表格每行）上重复设置大量变量，CSS 引擎不会缓存变量计算结果
- 如果项目用 Sass，直接在组件 SCSS 文件里
@include bs-css-vars(...)更稳，但前提是能控制编译 scope
真正麻烦的从来不是“怎么设变量”，而是“哪些变量要一起设”和“谁在悄悄读它们”。多看 Bootstrap 的 CSS 输出，少猜。
