如何在 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 类 (mat-input-wrapper)，其填充为 padding-bottom: 1.296875em。

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

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

Answer 1

更新

Angular 关于/deep/ 或>>> (Thanks @DeborahK) 的官方回复

已弃用对模拟 /deep/ CSS 选择器（Shadow-Piercing 后代组合器又名 >>>）的支持，以匹配浏览器实现和 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 ;
}