如何在Bootstrap 4和Sass中用button-variant混入自定义白色文本按钮？

嘿，这个问题其实很好解决！Bootstrap 4的button-variant混入本身就预留了文本颜色相关的参数，默认是通过color-contrast()函数根据背景色自动计算文本色，但我们完全可以手动传入参数来覆盖这个默认行为，而且不用碰_buttons.scss文件。

先给你理清楚button-variant的关键参数：它的默认定义里，$color、$hover-color、$active-color这些都是可选参数，默认值是基于背景色计算的对比色。我们只需要把这些参数手动设为#fff，就能强制所有状态下的文本都是白色。

具体代码示例 #

在你的custom.scss里，直接给混入传入文本颜色参数就行：

.my_button {
  @include button-variant(
    $background: #your-bg-color, // 替换成你需要的按钮背景色
    $border: #your-border-color, // 对应按钮的边框色
    $color: #fff, // 常态下的白色文本
    $hover-color: #fff, // hover状态保持白色
    $active-color: #fff // 点击激活状态保持白色
    // 如果需要自定义hover/active的背景/边框色，也可以在这里补充，不填就用默认的加深效果
  );
}

举个实际的例子，比如你想要一个深绿色的按钮，文本全程白色：

.my_button {
  @include button-variant(
    $background: #28a745,
    $border: #28a745,
    $color: #fff,
    $hover-color: #fff,
    $active-color: #fff
  );
}

这样写出来的按钮，不管是常态、hover还是点击状态，文本都会保持白色，完全符合你的需求，而且全程不需要修改Bootstrap的原生样式文件。

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