bootstrap 5+ 按钮样式由 css 变量控制，直接修改 .btn-primary 类易失效；应重定义 --bs-btn-primary-bg 等变量，或用 sass 的 button-variant() 扩展新类，注意 dark mode 需手动适配。
直接改 btn-primary 类的 css 会失效？
因为 bootstrap 5+ 默认用 css 变量（--bs-btn-color、--bs-btn-bg 等）控制按钮样式，且大量使用 !important 覆盖。硬写 .btn-primary { background: red !important } 虽然能生效，但破坏可维护性，也容易被后续升级覆盖。
推荐做法是重定义 CSS 变量，在 :root 或组件作用域里覆盖：
:root {
--bs-btn-primary-bg: #6a5acd; /* 深紫 */
--bs-btn-primary-border-color: #5a4ac5;
--bs-btn-primary-hover-bg: #5a4ac5;
}
- 改完后所有
btn btn-primary自动更新，无需改 HTML - 变量名必须严格匹配（Bootstrap 官方文档有完整列表），拼错就无效
- 如果只改局部按钮，用
.my-btn { --bs-btn-bg: #007bff; }+class="btn my-btn"更安全
想新增一个 btn-purple 类，不是覆盖已有颜色
Bootstrap 不提供开箱即用的紫色按钮类，但支持扩展。关键不是复制粘贴 CSS，而是复用它的 mixin 和变量逻辑。
如果你用 Sass（推荐）：
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
<p>$purple: #8a2be2;
$purple-rgb: 138, 43, 226;</p><p>.btn-purple {
@include button-variant($purple-rgb, $purple, $purple, $purple);
}</p>
-
button-variant()是 Bootstrap 内置 mixin，自动处理 hover / focus / disabled 状态 - 别手动写
background+border+color，否则 disabled 态会漏掉 - 没用 Sass？那就老实用 CSS 变量 +
.btn.btn-purple组合类，避免样式冲突
自定义按钮在 dark mode 下颜色反了怎么办
Bootstrap 5.3+ 原生支持 dark mode，但自定义颜色不会自动适配——它只管 btn-primary 到 btn-dark 这套内置体系。
要让 btn-purple 在 dark mode 下也合理，得手动加媒体查询：
@media (prefers-color-scheme: dark) {
.btn-purple {
--bs-btn-bg: #5a1e9c;
--bs-btn-border-color: #4a198c;
--bs-btn-hover-bg: #4a198c;
}
}
- 别依赖
.btn-dark强制覆盖，它会影响所有按钮，不精准 - 检查浏览器是否真正触发了
prefers-color-scheme（比如 macOS 系统设置里开了深色模式） - 用 DevTools 的「Rendering」面板模拟 dark mode，比切系统更高效
为什么加了 !important 还没变色？
常见于 inline style、JS 动态添加 class、或第三方库（如某些 UI 组件库）劫持了按钮样式。此时优先级链条变成：style="" > !important CSS 规则 > 普通 CSS。
- 先用 DevTools 查看 computed 样式，定位哪条规则赢了
- 如果是 React/Vue 组件里写的
className="btn btn-primary"，确认没被父组件的 scoped style 或 CSS-in-JS 覆盖 - 临时加
style="background: red !important"测试是否是优先级问题；如果是，说明得从源头（如 CSS 加载顺序、CSS-in-JS 配置）解决
改按钮颜色这事，表面是换几个值，实际卡点常在变量名拼错、dark mode 漏适配、或者被 JS 框架的样式隔离机制拦住了。动手前先打开 DevTools 看一眼 computed，比猜半天快得多。
