How to override md-input-container styles in angular2?

Question

I have the following code snippet for md-input-container using angular 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 a class (mat-input-wrapper) that has padding-bottom addition : 1.296875em.

How to override this container filling style?

PS: adding a class to the container and creating an add-on: 0px as important also does not work.

Answer 1

Update

The official answer from Angular is around /deep/ or >>> ( Thanks @DeborahK )

Support for emulated / deep / CSS selectors (aka penguin descendant combinator →>) has been deprecated to match browser implementations and Chromes intentions to remove. :: ng-deep has been added to provide a temporary workaround for developers who currently use 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 specification

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 will need >>> as described here

However, /deep/ and >>> are deprecated as described here

Live plunker example

Answer 2

Try the following:

 <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 must be a .mat-input-wrapper child - from your example, I don't know where this class came from

---

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

Make sure you clear the cache and even restart the application, because sometimes changes do not load

Answer 4

Use depth for styling.

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