为何自定义按钮类无法覆盖Bootstrap 5的btn背景色属性？

使用Bootstrap 5的button-variant混合宏创建自定义颜色按钮时，悬停效果颜色修改成功，但按钮背景色无法生效。通过浏览器开发者工具发现，自定义类的background-color属性没能覆盖默认btn类的背景色，尝试调整混合宏变量也没用。

自定义Bootstrap SCSS代码 #

@import "../bootstrap-5.0.2/scss/functions";
@import "../bootstrap-5.0.2/scss/variables";
@import "../bootstrap-5.0.2/scss/utilities";
@import "../bootstrap-5.0.2/scss/mixins";

$my-custom-color: #ffa500; /* 橙色 */
.my-custom-button {
  @include button-variant($background: $my-custom-color, $border: $my-custom-color, $color: #fff, $hover-background: darken($my-custom-color, 10%));
}

@import "../bootstrap-5.0.2/scss/bootstrap";

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- 自定义Bootstrap CSS -->
  <link rel="stylesheet" href="style/bootstrap-custom.css" />

  <title>Navbar</title>
</head>

<body>
  <a class="btn my-custom-button">自定义按钮</a>
  <script src="bootstrap-5.0.2/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

问题核心是CSS优先级冲突：你在引入完整Bootstrap样式前定义了自定义类，但Bootstrap的btn类（尤其是结合状态的选择器）优先级更高，导致自定义背景色被覆盖。

下面两种方法都能解决：

方法1：调整导入顺序 #

把自定义类的定义移到@import "../bootstrap-5.0.2/scss/bootstrap";之后，让自定义样式后加载，自然覆盖默认样式：

@import "../bootstrap-5.0.2/scss/functions";
@import "../bootstrap-5.0.2/scss/variables";
@import "../bootstrap-5.0.2/scss/utilities";
@import "../bootstrap-5.0.2/scss/mixins";
@import "../bootstrap-5.0.2/scss/bootstrap";

$my-custom-color: #ffa500; /* 橙色 */
.my-custom-button {
  @include button-variant($background: $my-custom-color, $border: $my-custom-color, $color: #fff, $hover-background: darken($my-custom-color, 10%));
}

方法2：提升选择器优先级 #

给自定义类加上btn前缀，让选择器更具体：

$my-custom-color: #ffa500; /* 橙色 */
.btn.my-custom-button {
  @include button-variant($background: $my-custom-color, $border: $my-custom-color, $color: #fff, $hover-background: darken($my-custom-color, 10%));
}

补充说明 #

button-variant生成的是单一类的样式，而Bootstrap默认的btn样式会和:hover、:focus等状态选择器结合，优先级比单一自定义类高。以上两种方式都是通过提升自定义样式的优先级，解决覆盖问题。

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