Twitter bootstrap 引导4-通过SASS修改禁用的按钮样式

我正在使用

bootstrap4

并尝试使用

SASS

更改一些按钮的颜色。在我的自定义

SCSS

文件中，我有以下内容

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

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

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

---

我正在努力寻找任何例子。有人能给我指一个吗？

禁用按钮的可用变量：

此选项用于更改禁用按钮的背景不透明度

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

---

这用于更改禁用链接按钮文本颜色（

他将帮助您提供变量名称和值
按钮变量

@mixin用于构建按钮，默认情况下，

.disabled

是背景颜色的变体。mixin没有用于禁用颜色的参数

因此，您必须使用类似于

.btn primary.disabled

的选择器显式设置状态，并使用

按钮变量

@mixin重新编译。例如，这里将禁用状态更改为带黑色边框的灰色背景

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

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

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

@import "bootstrap";

演示：

---

---

相关问题：

我想更改背景色，而不仅仅是不透明性默认情况下，禁用按钮将继承按钮的背景色（主、危险、信息等）。如果需要自定义颜色，可以向

$theme colors

贴图添加颜色，并将其用于禁用按钮

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

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

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

@import "bootstrap";