如何在 angular2 中覆盖 md-input-container 的样式? [英] How to override styles of md-input-container in angular2?
问题描述
我有以下使用角度材料设计的 md-input-container 代码:
<input mdInput [placeholder]="'common.password' | translate" type="password" formControlName="password" (change)="onPasswordChange($event.target.value)" required validate-onBlur/><md-hint *ngIf="frmLoginInfo.controls.password.pristine" class="s-text-caption s-hint">{{ 'signup.pwdRule' |翻译}}</md-hint></md-input-container>
这个容器内部有一个 div 类 (mat-input-wrapper),其内边距为 padding-bottom: 1.296875em.
如何覆盖容器的这种填充样式?
PS : 向容器添加类并使 padding: 0px 作为 important 也不起作用.
更新
Angular 对 /deep/
或 >>>
的官方回应(
I have the following piece of code for md-input-container using angular material design:
<md-input-container>
<input mdInput [placeholder]="'common.password' | translate" type="password" formControlName="password" (change)="onPasswordChange($event.target.value)" required validate-onBlur/>
<md-hint *ngIf="frmLoginInfo.controls.password.pristine" class="s-text-caption s-hint">{{ 'signup.pwdRule' | translate }}</md-hint>
</md-input-container>
This container has a div inside with class (mat-input-wrapper) which has a padding of padding-bottom: 1.296875em.
How do I override this padding style of the container?
PS : Adding class to the container and making the padding: 0px as important also doesnt work.
Update
Official Response from Angular about /deep/
or >>>
(Thanks @DeborahK)
Support for the emulated /deep/ CSS Selector (the Shadow-Piercing descendant combinator aka >>>) has been deprecated to match browser implementations and Chrome’s intent to remove. ::ng-deep has been added to provide a temporary workaround for developers currently using this feature.
From: http://angularjs.blogspot.co.uk/2017/07/angular-43-now-available.html
Add a more specific style to the component - see CSS specificity
html
<md-input-container id="forceStyle">
<input mdInput [placeholder]="'common.password' | translate" type="password" formControlName="password" (change)="onPasswordChange($event.target.value)" required validate-onBlur/>
<md-hint *ngIf="frmLoginInfo.controls.password.pristine" class="s-text-caption s-hint">{{ 'signup.pwdRule' | translate }}</md-hint>
</md-input-container>
css
>>> #forceStyle .mat-input-wrapper {
padding-bottom: 0px;
}
You need the >>>
as explained here
However /deep/
and >>>
are deprecated as explained here
这篇关于如何在 angular2 中覆盖 md-input-container 的样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!