html - 如何覆盖 angular2 中 md-input-container 的样式？

Question

我有以下使用 Angular Material 设计的 md-input-container 代码:

<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>

此容器内部有一个带有类 (mat-input-wrapper) 的 div，它的内边距为 padding-bottom: 1.296875em。

如何覆盖容器的这种填充样式？

PS:将类添加到容器并将 padding: 0px 作为 important 也不起作用。

Answer 1

更新

Angular 关于 /deep/ 或 >>> 的官方回应 ( 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.

发件人:http://angularjs.blogspot.co.uk/2017/07/angular-43-now-available.html

Another related question

---

为组件添加更具体的样式 - 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;
}

您需要 >>> 说明 here

然而，/deep/ 和 >>> 已弃用，如 here 所述

Live plunker example