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

问题描述

对于 md-input-container ，我使用以下角色材料设计代码：

 < MD-输入容器> 
< input mdInput [placeholder] ='common.password'| translatetype =passwordformControlName =password（change）=onPasswordChange（$ event.target.value）required validate-onBlur /> 
< md-hint * ngIf =frmLoginInfo.controls.password.pristineclass =s-text-caption s-hint> {{'signup.pwdRule'| translate}}< / md-hint> 
< / md-input-container> 
  

这个容器里有一个带有类（mat-input-wrapper）的div， strong> padding-bottom：1.296875em。

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

PS：向容器添加类并将填充：0px作为重要也无效。

解决方案

更新

来自Angular的官方回应about / deep / 或>>> （

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.

解决方案

Update

Official Response from Angular about /deep/ or >>> (Thanks @DeborahK)

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

这篇关于如何在angular2中覆盖md-input-container的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！