Как переопределить стили md-input-container в angular2?

Обновлять

Официальный ответ от Angular по поводу /deep/ или >>> (Спасибо @DeborahK)

Поддержка эмулированного / глубокого / CSS-селектора (комбинатор потомков Shadow-Piercing aka >>>) устарела, чтобы соответствовать реализациям браузера и намерениям Chrome удалить. :: ng-deep был добавлен, чтобы предоставить временное решение для разработчиков, которые в настоящее время используют эту функцию.

От: http://angularjs.blogspot.co.uk/2017/07/angular-43-now-available.html

Другой связанный вопрос

Добавьте к компоненту более конкретный стиль - см. Специфику CSS

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

Вам понадобится >>>, как описано здесь

Однако /deep/ и >>> устарели, как объяснено здесь

Живой пример плунжера

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, но на всякий случай.

Убедитесь, что вы очистили кеш и даже перезапустите приложение, потому что иногда изменения не загружаются

Попробуй это:

<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;
    }`
    ],

Используйте deep для укладки

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