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

Question

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.

Answer 1

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

Answer 2

Try this:

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

Important .mat-input-wrapper need to be a child of wrapper - from your example I don't know where that class come from

---

After your post update I think it should work the following: #forceStyle > .mat-input-wrapper{padding-bottom: 0 !important} - should work even without the important but just to be sure.

Make sure you clear cache and even relaunch the app because sometimes changes are not loaded

Answer 4

Use deep for styling

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