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

Question

我一直在阅读这方面的文档(https://material.angular.io/components/input/overview)有一节说明如何更改md-input-container底部的行颜色.但我不清楚属性是什么,也没有代码示例可供参考.它表示可以使用md-input-container的color属性更改下划线颜色.另外我的下划线是动画下划线,在提供的链接中可见.有人可以更清楚地解释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输入和标签的颜色:

焦点颜色变化标签:

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

输入焦点颜色变化:

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

Answer 2

将此添加到您的组件中，encapsulation: ViewEncapsulation.None 它可以在 angular 6 中工作

例子 ：

import {Component, Injectable, OnInit, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  encapsulation: ViewEncapsulation.None
})

并在 CSS 文件中添加代码

例子 ：

.mat-form-field-label {
    color: white !important;
}
.mat-form-field-underline {
    background-color: white !important;;
}
.mat-form-field-ripple {
    background-color: white !important;
}

Answer 3

使用角度材料 7.3 这对我有用 - 当文本框具有焦点时更改下划线：

（在全局 styles.scss 中）

.mat-form-field.mat-focused .mat-form-field-ripple {
    background-color: #69f0ae !important;
  }

Answer 4

我是这样解决的

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