自定义Bootstrap SASS按钮在表格或卡片中显示异常求助

最近我在尝试用SCSS自定义Bootstrap 3的btn-default按钮样式时遇到了个奇怪的问题：按钮直接放在页面里显示正常，但一放进表格或者卡片组件里，就只剩边框和文字了——背景变成透明，字体颜色还变成了蓝色，跟超链接似的。

最初的代码 #

我一开始写的SCSS是这样的：

.btn-default { @extend .btn; border-color: #BCBCBC; }

按钮的使用方式：

<button type="button" id="btnReset" class="btn-default btn-sm"> 
  <span class="fas fa-sync-alt" aria-hidden="true"></span> Reset 
</button>

修复方案 #

查了相关建议后，我调整了代码，用Bootstrap内置的button-variant混合宏来定义完整的按钮样式，虽然最终颜色和Bootstrap 3默认的不完全一样，但我更喜欢这种稍深的色调：

.btn-default { 
  $color-bg: #DCDCDC; 
  $color-border: #BCBCBC; 
  $hover-bg: #BFBFBF; 
  $active-bg: #BFBFBF; 
  @include button-variant( 
    $color-bg, 
    $color-border, 
    $hover-bg, 
    darken($color-border, 10%), 
    $active-bg, 
    darken($color-border, 12.5%) 
  ); 
}

这样调整后，不管把按钮放在表格、卡片还是其他容器里，样式都能正常显示了。

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