[英]How to overwrite ngModel input styling
在我的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>
问题是它对我不想输入的内容应用样式。 例如,您可以在此处看到底部的绿色边框
所以我试图在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样式?
如果这是您很难覆盖的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 {}
您需要使样式的特异性高于您要覆盖的样式。
div#test span { color: green }
div span { color: blue }
span { color: red }
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.