如何更改angular4中md-input-container的下劃線顏色？

我一直在閱讀此文檔（https://material.angular.io/components/input/overview）有一節介紹如何更改md-input-container底部的行的顏色。但是我不清楚屬性是什麼，也沒有代碼示例可供參考。它表示可以使用md-input-container的顏色屬性更改下劃線顏色。另外我的意思是下劃線是動畫下劃線，可以在提供的鏈接中看到。有人能更清楚地解釋md-input-container的屬性是什麼，或者提供一些代碼。我曾嘗試添加一個叫做color的指令，在css中改變md-input-container的顏色，除此之外我還沒有成功。如果有人能夠解釋/顯示某些代碼來證明這一點，那將會非常有幫助。謝謝！如何更改angular4中md-input-container的下劃線顏色？

下面是一些代碼，我覺得應該工作，根據該文本的措辭。但事實並非如此。

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

來源

2017-07-26 Dan

也嘗試使用十六進制顏色，但那也沒有工作。 – Dan

加入CSS沒有工作？ –

我解決它像這樣

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

來源

2017-07-26 14:45:37 Hareesh

的問題是由於View Encapsulationgit issues

請在你的CSS改變

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

查看這個Plunker的工作示例。

來源

2017-07-26 15:14:00

您可以使用此

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

還是我做的是給角材料元素的類，並把它添加到styles.css中或SCSS您正在使用哪個擴展。所以它會看起來像樣式（這是一個全球樣式表）

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

來源

2017-12-06 15:51:20 JamesHandshoe

如何更改angular4中md-input-container的下劃線顏色？

回答

相關問題