直接修改 .btn-primary 的 CSS 经常失效，因 Bootstrap 5.2+ 使用 CSS 变量（如 --bs-btn-primary-bg）并大量应用 !important；需确保自定义 CSS 在 Bootstrap 后加载、提高选择器特异性、覆盖所有状态及三属性（背景、边框、文字色），或优先用官方推荐的 CSS 变量重定义方式。
直接改 .btn-primary 的 CSS 为什么经常失效
因为 Bootstrap 5.2+ 默认用 CSS 变量（如 --bs-btn-primary-bg）控制颜色，且大量使用 !important 覆盖原始规则。你写 .btn-primary { background-color: #ff6b6b; } 很可能被后续加载的变量值覆盖，或者被更具体的选择器（如 .btn.btn-primary:hover）压过。
真正起效的前提是：
- 你的 CSS 文件必须在 Bootstrap 的 CSS 之后引入
- 选择器特异性不能低于 Bootstrap 原始规则（比如要写
.btn.btn-primary:disabled，而不是只写.btn-primary） - 必须同步覆盖所有状态：
:hover、:active、:focus、:disabled，漏一个就“点一下变回默认” - 颜色三属性要一起改：
background-color、border-color、color，否则文字看不清或边框不匹配
用 CSS 变量重定义 --bs-btn-primary-bg 最省事
这是 Bootstrap 官方推荐路径，改一次，所有 .btn-primary 实例自动更新，包括悬停、禁用、焦点态——因为这些状态都基于同一个变量计算。
只需在 <style> 或自定义 CSS 文件中写：
:root {
--bs-btn-primary-bg: #7e57c2;
--bs-btn-primary-border-color: #6a49a8;
--bs-btn-primary-hover-bg: #6a49a8;
--bs-btn-primary-hover-border-color: #5a3a98;
--bs-btn-primary-disabled-bg: #b39ddb;
--bs-btn-primary-disabled-border-color: #9575cd;
}注意：
- 变量名必须严格匹配官方文档列表，拼错（比如写成
--bs-btn-primary-bk）就无效 - 如果只影响局部按钮，建议用作用域更小的写法：
.my-card .btn-primary { --bs-btn-primary-bg: #7e57c2; } - 深色模式下这些值不会自动切换，得手动加
@media (prefers-color-scheme: dark)块重设
想新增一个 .btn-purple 类，别手写 hover/focus
手动补全 .btn-purple:hover、.btn-purple:active 等规则容易遗漏 disabled 态或焦点环样式，还破坏可维护性。Bootstrap 提供了 button-variant() mixin，专为扩展设计。
如果你用 Sass（推荐）：
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
<p>$purple-rgb: 126, 87, 194;
$purple: #7e57c2;</p><p>.btn-purple {
@include button-variant($purple-rgb, $purple, $purple, $purple);
}没用 Sass？那就用 CSS 变量 + 组合类安全兜底：
.btn-purple {
--bs-btn-bg: #7e57c2;
--bs-btn-border-color: #6a49a8;
--bs-btn-hover-bg: #6a49a8;
--bs-btn-hover-border-color: #5a3a98;
--bs-btn-disabled-bg: #b39ddb;
--bs-btn-disabled-border-color: #9575cd;
}
/* HTML 中写：<button class="btn btn-purple">紫色按钮</button> */
.btn-outline-* 颜色不生效的常见原因
很多人设了 --bs-btn-outline-border-color，但 .btn-outline-success 还是绿色边框，问题不在变量本身，而在调用链。
.btn-outline-success 实际依赖三个变量同时生效：
-
--bs-btn-color（文字色） -
--bs-btn-border-color（边框色） -
--bs-btn-bg（背景色，必须设为transparent才是“轮廓”效果）
所以你要这样写才可靠：
.btn-outline-purple {
--bs-btn-color: #7e57c2;
--bs-btn-border-color: #7e57c2;
--bs-btn-bg: transparent;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #7e57c2;
--bs-btn-hover-border-color: #7e57c2;
}最后提醒一句：所有自定义变量在深色模式下都不会自动翻转，@media (prefers-color-scheme: dark) 必须自己补全，否则用户切到暗色主题时按钮可能直接糊成一片。
