Html 如何覆盖angular2中md输入容器的样式？

我有以下一段代码，用于使用角度材质设计的md输入容器：

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

{{'signup.pwdRule'| translate}}

此容器内部有一个div，其中包含一个类（mat输入包装器），该类的padding为padding bottom:1.296875em。

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

PS：向容器中添加类并将填充：0px设置为重要也不起作用

更新 Angular关于

/deep/

或

>

（）

为匹配浏览器实现和Chrome删除的意图，已不推荐对模拟/deep/CSS选择器（阴影穿透子体combinator aka>>>）的支持：已添加ng deep，为当前使用此功能的开发人员提供临时解决方案

发件人：

---

向构件添加更具体的样式-

html

{{'signup.pwdRule'| translate}}

css

>#forceStyle.mat输入包装器{
垫底：0px；
}

您需要所解释的

>

然而，

/deep/

和

>

如前所述被弃用

试试这个：

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

{{'signup.pwdRule'| translate}}
@组成部分({
选择器：“仪表板”，
templateUrl:“dashboard.component.html”，
样式：[`.box model.mat输入包装器{
保证金：0px！重要；
填充底部：0px！重要；
}`
],

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>

重要

.mat输入包装器

必须是

包装器

的子级-从您的示例中，我不知道该类来自何处

---

在您的帖子更新之后，我认为它应该在以下方面起作用：

#forceStyle>.mat输入包装器{padding bottom:0！important}

-即使没有

important

，也应该可以工作，但这只是为了确保

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

请使用deep进行样式设置

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

---

.mat输入包装器{填充底部：0px！重要；}

应该在@sTx中起作用，尽管这将更改

.mat input wrapper

的所有实例，使其具有0填充，因此您应该为父元素添加

id

或

类

，就像@0mpurdy在回答中所说的那样，并将目标设置为

#parent>.mat input wrapper{……}

谢谢您的帮助，但这也不起作用。.在检查了chrome developer tool上的元素后，我无法看到应用的样式。@Shrtiagarwal-此示例应该可以工作，但有一点变化：

#forceStyle.mat-input-wrapper

-在我看到您的屏幕后，我用一个修复程序和一个实时演示示例更新了答案，一个l尽管要知道，

/deep/

正在被弃用-请参阅我链接的GitHub问题中的备选方案。我认为没有必要使用

deep

，只是一个更具体的版本target@ShrutiAgarwal-请确保清除缓存，甚至再次为应用程序提供服务，因为有时未加载更改。我已清除缓存并重新启动应用程序。不工作k、 这太奇怪了……你能给

#forceStyle

一个边距、边框、任何东西一个样式，然后检查你是否能在inspect中看到它吗？是的，我给它添加了边框，它被添加了。现在试试

#forceStyle>div{padding bottom:0！重要的}

这个样式没有被我们应用。

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