如何更改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的下划线颜色？

回答

相关问题