Bootstrap 4.6.0 form-validation-states 不会改变验证边框的颜色

Posted 2023-03-21

【中文标题】Bootstrap 4.6.0 form-validation-states 不会改变验证边框的颜色

【英文标题】：Bootstrap 4.6.0 form-validation-states doesn't change the color of the validation border

【发布时间】：2021-12-13 22:52:10

【问题描述】：

我无法通过修改引导程序的主题来更改验证边框颜色。 我的目标是将有效更改为粉红色，以便我可以看到更改，并且出于同样的原因将无效更改为蓝色。

这是我尝试使用的代码：

// Required
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";

$form-validation-states: map-merge(
    (
        "valid": (
            "color": pink,
            "icon": $form-feedback-icon-valid
        ),
        "invalid": (
            "color": blue,
            "icon": $form-feedback-icon-invalid
        )
    ),
    $form-validation-states
);

// Optional
@import "../../../node_modules/bootstrap/scss/root";
@import "../../../node_modules/bootstrap/scss/reboot";
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/code";
.
.
.

我还尝试将$form-validation-states 放在不同的位置，例如在可选之前、可选之后和必需之前。

来源： https://getbootstrap.com/docs/4.6/components/forms/#customizing

【参考方案1】：

我相信这是Bootstrap variable override 的正确位置：

// Required
@import "../../../node_modules/bootstrap/scss/functions";

$form-validation-states: map-merge(
    (
        "valid": (
            "color": pink,
            "icon": $form-feedback-icon-valid
        ),
        "invalid": (
            "color": blue,
            "icon": $form-feedback-icon-invalid
        )
    ),
    $form-validation-states
);

@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";

// Optional
@import "../../../node_modules/bootstrap/scss/root";
@import "../../../node_modules/bootstrap/scss/reboot";
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/code";

【讨论】：

谢谢，这有帮助，虽然我不得不重新声明 $form-validation-states 所需的一些变量，因为它在引导程序的变量导入之上，我不能在它之上使用它们。