如何覆盖ngModel输入样式

时间:2017-05-05 19:15:27

标签: css angular ionic2

在我的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)

如何在不修改默认离子样式的情况下覆盖此ngModel样式?

2 个答案:

答案 0 :(得分:1)

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

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

让我们说你试图设计风格的div还有另一个类#foo&#39;,将它分开。只需更改该规则即可在组件中添加额外的类。现在它更具体。

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

答案 1 :(得分:1)

您需要使您的风格的特异性高于您想要覆盖的风格。

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

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