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

Question

我使用角度材质设计为 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>

此容器的div内部有class（mat-input-wrapper），其填充 padding-bottom：1.296875em。

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

PS：在容器中添加类并填充：0px作为重要也不起作用。

Answer 1

更新

Angular对/deep/或>>>（Thanks @DeborahK）的正式回应

  

已弃用对模拟/深度/ CSS选择器（Shadow-Piercing后代组合器又名＆gt;＆gt;＆gt;）的支持，以匹配浏览器实现和Chrome的删除意图。 :: ng-deep已添加为当前使用此功能的开发人员提供临时解决方法。

来自：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

Answer 2

试试这个：

<div class="box-model"> 
       <md-input-container fxFlex="auto" class="custom-search-mdinput">
         <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>
</div>

@Component({
    selector: "dashboard",
    templateUrl: "dashboard.component.html",
    styles: [`.box-model .mat-input-wrapper {
        margin: 0px !important;
        padding-bottom: 0px !important;
    }`
    ],

Answer 3

<强> HTML

<div id="wrapper">
  <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>
</div>

<强> CSS

#wrapper .mat-input-wrapper{padding-bottom: 0px !important;}

重要 .mat-input-wrapper需要成为wrapper的孩子 - 从您的例子中我不知道该课程的来源

在您的帖子更新后，我认为它应该工作如下： #forceStyle > .mat-input-wrapper{padding-bottom: 0 !important} - 即使没有important也应该工作，但只是为了确定。

请确保清除缓存，甚至重新启动应用，因为有时无法加载更改

Answer 4

使用深度造型

/deep/ .mat-input-wrapper { 
  padding-bottom: 0px ;
}