如何覆盖 ngModel 输入样式答案

【问题标题】：How to overwrite ngModel input styling如何覆盖 ngModel 输入样式
【发布时间】：2017-10-04 08:51:52
【问题描述】：

在我的 Ionic 应用程序中，我使用 [(ngModel)] 在我的类中绑定和传递输入值。

<ion-item>
        <ion-label color="primary" floating>flow [m <sup>3</sup> /h]</ion-label>
        <ion-input type="number" [(ngModel)]="flow" (change)="calculate()"></ion-input>
</ion-item>

问题在于它为我的输入应用了我不想使用的样式。例如底部的绿色边框，您可以看到here

所以我尝试在scss 文件中覆盖它：

page-fan-choice {
    .ng-valid * {
        border-bottom-color: #dedede;
        box-shadow: none;
    }
}

但这没有帮助。我检查了控制台，发现层次结构树中的默认样式比我的要高。见下文：

.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
    border-bottom-color: #32db64;
    box-shadow: inset 0 -1px 0 0 #32db64;
}
page-fan-choice .ng-valid * {
    border-bottom-color: #dedede;
    box-shadow: none;

我也尝试使用!important。我提供了帮助，但它也覆盖了我想要保留的输入的默认离子样式，例如单击时的蓝色底边框。所以底部边框一直是灰色的(#dedede)。

如何在不修改默认 Ionic 样式的情况下覆盖此 ngModel 样式？

【问题讨论】：

你可以为它创建一个 plunker 吗？
查看此链接stackoverflow.com/questions/41360804/…

标签： css angular ionic2

【解决方案1】：

如果这是您难以覆盖的 CSS 规则：

.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {}

假设您要设置样式的 div 有另一个类 'foo'，以便将其分开。只需更改该规则即可在组件中添加额外的类。现在更具体了。

.foo.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {}

【讨论】：

【解决方案2】：

您需要使您的样式的特异性高于您要覆盖的样式。

div#test span { color: green }
div span { color: blue }
span { color: red }

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【讨论】：