Styling md-input-element

Question

Ich versuche, die .md-input-element auf md-input zu stylen, die standardmäßig von angular-material.css hinzugefügt wird, die scheint, kann ich nicht zur Arbeit kommen. Ich versuche, den Buchstaben-Abstand-Stil hinzuzufügen, aber es funktioniert nur als Strom. Stil auf der Konsole. Gibt es eine Möglichkeit, diesen bestimmten Stil für md-input-element in meiner eigenen CSS-Datei zu überschreiben?

Mein HTML-Code ist wie folgt:

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

Answer 1

Wenn Sie den Stil in der Komponente festgelegt, dass die genannten enthält HTML-Code, dann wird es nicht wegen des Standards ViewEncapsulation funktionieren. Der Standard ist Emulated und Ihren CSS-Selektor zu so etwas wie die folgenden während der Laufzeit ändern:

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

wird Dieser Selektor nicht mit class="md-input-element" der md-input wegen des beigefügten Attributs übereinstimmen.

Jetzt haben Sie drei Möglichkeiten

1. Use/deep/: Sie können Ihren Selektor tief umschreiben. Z.B. :host /deep/ .md-input-element, damit Angular2 das kryptische Attribut zu Ihrem Selektor hinzufügt.
2. Ändern ViewEncapsulation: Sie können Ihre ViewEncapsulation in None ändern, um zu verhindern, dass Angular2 das kryptische Attribut zu Ihrem Selektor hinzufügt.
3. Globale Stil: Fügen Sie den Stil zu einem globalen style.css zu bekommen um die ViewEncapsulation

Schauen Sie hier, um weitere Informationen über Ihre Komponenten Styling https://angular.io/docs/ts/latest/guide/component-styles.html

Answer 2

versuchen, mit unter Selektor

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