Wie ändere ich die Unterstreichfarbe des md-Eingabebehälters in angular4?

Question

Ich habe die Dokumente dafür gelesen (https://material.angular.io/components/input/overview) Es gibt einen Abschnitt, der sagt, wie man die Farbe der Linie am unteren Rand des md-Eingabebehälters ändert. Aber mir ist nicht klar, was ein Attribut ist, und es gibt kein Codebeispiel, auf das es sich bezieht. Es besagt, dass die Unterstreichungsfarbe mit dem Farbattribut des md-Eingabebehälters geändert werden kann. Was ich unter unterstreichen verstehe, ist die animierte Unterstreichung, die sich im angezeigten Link ausbreitet. Könnte jemand deutlicher erklären, was das Attribut md-input-container ist, oder Code bereitstellen? Ich habe versucht, eine Direktive, die Farbe genannt wird, unter anderem die Farbe des md-Eingabebehälters in css zu ändern, und ich bin darin nicht erfolgreich. Wenn jemand etwas Code erklären/zeigen könnte, der das demonstriert, wäre das sehr hilfreich. Vielen Dank!

Hier ist ein Code, der meiner Meinung nach funktionieren sollte, basierend auf dem Wortlaut dieses Textes. Aber das tut es nicht.

<md-input-container 
    color="yellow" 
    class="input-half-width"> 
    <input 
     [(ngModel)]="driftInfo.title" 
     name="title" 
     mdInput 
     placeholder="Ange rubrik" 
    > 
    </md-input-container> 

Answer 1

Ich löste es wie dieses

/deep/ .mat-input-underline{ 
    border-bottom: 1px solid red!important; 
} 

Answer 2

Das Problem zu View Encapsulationgit issues

in Ihrem css Bearbeite Due

@Component({ 
    selector: 'input-overview-example', 
    templateUrl: 'input-overview-example.html', 
    styles: [':host/deep/ .mat-input-underline {background-color: red}'] 
}) 

Überprüfen Sie diese Plunker für Arbeitsbeispiel.

Answer 3

können Sie diese

::ng-deep .mat-input-underline{ 
    border-bottom: 1px solid red; 
} 

oder ich tue, ist dem Winkelmaterialelement eine Klasse, was verwenden geben und es in dem styles.css oder SCSS je nachdem, welche Erweiterung Sie verwenden. So würde es in Stilen (die ein globales Stylesheet ist) aussehen

.mat-input-underline .<custom class name> { 
    put your info you want to change here. 
}