Bootstrap VueJS无法添加类答案

【问题标题】：Bootstrap VueJS Can´t add classBootstrap VueJS无法添加类
【发布时间】：2021-04-13 07:56:52
【问题描述】：

我无法更改表单控制元素的背景。如果我想添加类来改变背景颜色：

 <input id="phone" class= 'form-control' :class = "validatePhone()?'valid':'not-valid'" v-model="phone" @keyup="validatePhone()" placeholder="Write your phone" />

.valid {
    background: $greenColor;
}

.not-valid {
    background: $redColor;
}

但如果我删除表单控制类工作正常。如果我直接将背景添加到 id 中，即使使用 form-control 元素，它也可以工作

//works

#phone {
 background: $redColor;
}

有什么想法吗？

谢谢

【问题讨论】：

.form-control 可能已经设置了具有更高优先级的背景颜色。尝试指定您的 css 选择器更像 .form-control.valid 等
谢谢你！这个解决方案比 Eliran 的选择更好？带有 !important 属性
是的，请不要使用!important，除非你真的必须这样做。

标签： vue.js bootstrap-4 vuejs2

【解决方案1】：

Syllz 答案：

.form-control 可能已经设置了具有更高优先级的背景颜色。尝试指定你的 css 选择器更像.form-control.valid 等

【讨论】：

【解决方案2】：

在 css 中为了覆盖全局属性，您应该使用 !important。

#phone {
 background: $redColor !important;
}

如果您有另一个 !important，您可以使用 css 树覆盖属性。

body #phone {
    background: $redColor !important;
}

【讨论】：