如何修改Bootstrap 4按钮颜色且不影响主题色（非brand-primary方案）

嘿，我给你几个实用的方案，不用动全局的theme-color也能单独搞定主按钮的颜色，而且完全不影响其他组件：

方案1：自定义按钮类（最直接，无需修改源码） #

创建一个专属的按钮类，只给需要改色的按钮添加这个类，完全不干扰原生的.btn-primary：

/* 放在Bootstrap CSS之后引入 */
.btn-custom-primary {
  background-color: #20c997; /* 这里换成你想要的主色 */
  border-color: #20c997;
}

/* 覆盖hover状态 */
.btn-custom-primary:hover {
  background-color: #1aa179;
  border-color: #1aa179;
}

/* 覆盖focus/active状态的阴影 */
.btn-custom-primary:focus, .btn-custom-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(32, 201, 151, 0.5); /* 对应颜色的RGB值，透明度0.5 */
}

/* 覆盖active状态 */
.btn-custom-primary:active, .btn-custom-primary.active,
.show > .btn-custom-primary.dropdown-toggle {
  background-color: #157a5a;
  border-color: #157a5a;
}

使用的时候直接加这个类就行：

<button class="btn btn-custom-primary">我的自定义主按钮</button>

原生的.btn-primary还是会沿用原来的主题色，互不影响。

方案2：用Sass单独覆盖按钮变量（推荐，最灵活） #

如果你是用Sass编译Bootstrap源码的话，可以单独给按钮相关的变量赋值，完全不碰全局的$theme-colors：

// 先引入Bootstrap的变量文件
@import "bootstrap/scss/variables";

// 单独设置主按钮的颜色变量，不修改全局主题色
$btn-primary-bg: #20c997;
$btn-primary-border: #20c997;
$btn-primary-hover-bg: #1aa179;
$btn-primary-hover-border: #1aa179;
$btn-primary-focus-box-shadow: 0 0 0 0.2rem rgba(32, 201, 151, 0.5);
$btn-primary-active-bg: #157a5a;
$btn-primary-active-border: #157a5a;

// 再引入Bootstrap的核心样式
@import "bootstrap/scss/bootstrap";

这样编译出来的.btn-primary就是你设置的颜色，而其他依赖$theme-colors的组件（比如导航栏、徽章、进度条等）依然使用原来的主题色，完美实现分离。

方案3：直接重写.btn-primary选择器（适合快速修改所有主按钮） #

如果你想把所有.btn-primary都改成新颜色，又不想用Sass，可以直接重写样式，注意要把这段CSS放在Bootstrap CSS之后引入，保证优先级：

.btn-primary {
  background-color: #20c997;
  border-color: #20c997;
}

.btn-primary:hover {
  background-color: #1aa179;
  border-color: #1aa179;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(32, 201, 151, 0.5);
}

⚠️ 注意：如果遇到样式优先级冲突，可以给属性加上!important快速解决，但尽量少用，避免后续样式维护麻烦。

内容的提问来源于stack exchange，提问作者Janier