angular - 如何更改angular4中md-input-container的下划线颜色？

Question

我一直在阅读相关文档 ( https://material.angular.io/components/input/overview ) 有一节介绍了如何更改 md-input-container 底部线条的颜色。但我不清楚属性是什么，也没有代码示例可供引用。它说可以使用 md-input-container 的颜色属性更改下划线颜色。此外，我所说的下划线是指在提供的链接中扩展为可见的动画下划线。有人可以更清楚地解释 md-input-container 的属性是什么，或者提供一些代码。我尝试添加一个名为 color 的指令，在 css 中更改 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>

Answer 1

在 MAT-FOCUSED 时更改 Md-Input 和标签的颜色:

焦点颜色变化标签:

.mat-focused .mat-form-field-label {
    color: #027D7C !important;
}

输入焦点颜色变化:

.mat-form-field-ripple {
    background-color: #027D7C !important;
}