如何在 Bootstrap 4 和 Sass 中设置自定义按钮文本颜色？

Posted 2023-03-06

【中文标题】如何在 Bootstrap 4 和 Sass 中设置自定义按钮文本颜色？

【英文标题】：How to set custom button text color in Bootstrap 4 and Sass?

【发布时间】：2018-10-17 19:10:06

【问题描述】：

我想在 Bootstrap 4 中创建一个带有白色 (#fff) 文本颜色的新按钮样式。 Mixin button-variant 会根据背景颜色自动设置文本颜色。如何在不修改_buttons.scss的情况下，同时使用这个mixin和设置颜色？

custom.scss

.my_button 
  @include button-variant(HOW TO SET TEXT COLOR TO WHITE?);

_buttons.scss

@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) 
  color: color-yiq($background);
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  @include hover 
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  

【参考方案1】：

这类似于：How to create new set of color styles in Bootstrap 4 with sass

自定义按钮需要使用@include，设置color:，并传入相应的mixin参数...

.btn-custom 
    @include button-variant(pink, red, red, #444, #333, red);
    color: #fff;

https://www.codeply.com/go/EHwnjvUXac

---

相关：Extending Bootstrap 4 and SASS

【讨论】：

我试过了，但没用。我忘了提到我使用的是<a> 而不是<button>。看起来这不适用于<a>。知道如何在不使用<button> 的情况下解决这个问题吗？

谢谢！有用。我之前试过color: #fff;，但我好像忘了在浏览器中禁用缓存:)