如何在 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/ 或 >>> 的官方回应(

直播 plunker 示例

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

Another related question

---

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

Live plunker example

这篇关于如何在 angular2 中覆盖 md-input-container 的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！