Bootstrap 4 - 通过 SASS 修改禁用按钮样式答案

【问题标题】：Bootstrap 4 - Modify disabled button styling via SASSBootstrap 4 - 通过 SASS 修改禁用按钮样式
【发布时间】：2021-02-14 07:38:52
【问题描述】：

我正在使用bootstrap4 并尝试使用SASS 更改一些按钮颜色。在我的自定义 SCSS 文件中，我有以下内容...

@import "node_modules/bootstrap/scss/bootstrap";

$theme-colors: (
    "primary": red
);

编译后，它可以正常工作。现在我想用同样的方法修改主按钮的禁用状态。

我正在努力寻找任何示例。谁能给我指一个？

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 sass

【解决方案1】：

button-variant @mixin 用于构建按钮，默认情况下.disabled 是背景颜色的变体。 mixin 没有禁用颜色的参数。

因此，您必须使用.btn-primary.disabled 之类的选择器显式设置状态并使用button-variant @mixin 重新编译。例如，这里正在将禁用状态更改为带有黑色边框的灰色背景...

$theme-colors: (
    "primary": red
);

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

.btn-primary.disabled {
    @include button-variant(grey, black);
}

@import "bootstrap";

演示：https://codeply.com/p/pi3OthqQos

【讨论】：

【解决方案2】：

禁用按钮的可用变量：

这用于更改禁用按钮的背景不透明度

`$btn-disabled-opacity` *Default value:* 0.65

这用于更改禁用的链接按钮文本颜色 (<a class="btn btn-primary disabled"> Disabled link </a>)

`$btn-link-disabled-color` *Default value* $gray-600

如果你想创建自己的 Bootstrap 主题，你可以看看这个online builder，他会帮你设置变量名和值

【讨论】：

我想改变背景颜色而不仅仅是不透明度
默认情况下，禁用的按钮将继承按钮的背景颜色（主要、危险、信息、..）如果您想要自定义颜色，您可以将颜色添加到 $theme-colors 地图并使用它禁用按钮