造型md-input-element

我想在md-input上設置.md-input-element的樣式，默認從angular-material.css添加，看起來我無法工作。我試圖添加字母間距風格，但它只能用作當前。在控制檯上的風格。有沒有什麼辦法可以在我自己的css文件中覆蓋md-input-element的這種特定樣式？造型md-input-element

我的HTML代碼如下：

<!-- Input Name* --> 
       <div class="mdl-grid"> 
        <div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone"> 
         <div class="name-padding"> 
          <md-input class="mdl-textfield--full-width" mandatory type="text" id="name" formControlName="name" placeholder="Name" 
           [(ngModel)]="outlet.name"> 
           <md-hint *ngIf="formErrors.name">{{ formErrors.name }}</md-hint> 
          </md-input> 
         </div> 
        </div> 
       </div>

CSS：

.md-input-element { 
    letter-spacing: 0 !important; 
}

來源

2016-11-25 Ichorville

嘗試使用更多的信息，在你的CSS重要..'！ md-input-element {letter-spacing：0！important; }' –

你添加了一些代碼嗎？ –

它仍然不會受到影響 – Ichorville

如果設置在包含提到的組件的樣式html代碼，那麼它將不會工作，因爲標準ViewEncapsulation。默認北京時間Emulated，並在運行時會改變你的CSS選擇器像下面這樣：

.md-input-element[_ngcontent-xsa-40] { 
{ 
    letter-spacing: 1px; 
}

這個選擇將不匹配，因爲附加的屬性與md-input的class="md-input-element"。

現在，你有三種選擇

使用/深/：您可以使用深重寫你的選擇。例如。 :host /deep/ .md-input-element停止Angular2將隱祕屬性添加到您的選擇器。
更改視圖封裝：您可以將您的ViewEncapsulation更改爲None，以阻止Angular2將隱祕屬性添加到您的選擇器中。
全球風格：樣式添加到全球style.css來繞過ViewEncapsulation

在這裏尋找有關設置組件的樣式https://angular.io/docs/ts/latest/guide/component-styles.html

來源

2016-11-25 07:55:52 philipooo

我現在在styles.css中使用它。爲此，我需要再次查看角度文檔。感謝這:) – Ichorville

與嘗試下面選擇

md-input-container:not(.md-input-invalid).md-input-focused .md-input { 
    letter-spacing:0!important; 
    border-color: orange; 
}

來源

2016-11-25 06:41:43 Rahul

它仍然不起作用。我正在使用angular-material2 alpha9.3和md-input-container不包含在該版本中嗎？ – Ichorville

造型md-input-element

回答

相關問題