如何更改angular4中md输入容器的下划线颜色？

我一直在阅读关于这个（）的文档，其中有一节介绍了如何更改md输入容器底部行的颜色。但我不清楚属性是什么，也没有代码示例可供参考。它表示可以使用md输入容器的颜色属性更改下划线颜色。此外，我所指的下划线是动画下划线，它在提供的链接中展开为可见。有人能更清楚地解释md输入容器的属性是什么，或者提供一些代码吗。我尝试添加一个名为color的指令，在css中更改md输入容器的颜色，以及其他一些事情，但我没有成功。如果有人能解释/展示一些代码来演示这一点，那将非常有帮助。谢谢

这里有一些代码，我觉得应该是有效的，基于该文本的措辞。但事实并非如此

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

我是这样解决的

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

---

问题是由于

视图封装

在css中进行更改

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

选中此项作为工作示例。

您可以使用此项

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

或者我要做的是给angular material元素一个类，并将其添加到styles.css或scss中，无论您使用哪个扩展。所以在样式中它看起来是这样的（这是一个全局样式表）

.mat输入下划线。{
把你想更改的信息放在这里。
}

当MAT聚焦时，更改Md输入和标签的颜色： 焦点颜色变化标签： 焦点颜色变化的输入：

---

这就是我如何在Angular 6.0.1中删除我的

我知道它是用来去掉下划线的，但是你可以按照同样的程序改变颜色，谢谢

::ng-deep .mat-form-field-underline {
    display: none;
}

---

将此添加到yout组件

封装：视图封装。无
它在角度6下工作

例如：

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

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

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

并在CSS文件中添加代码

例如：

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

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

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

在CSS文件中添加

.mat-form-field-underline {
    background-color: black !important; // change black with your color
}

对于angular 6+，我们可以在@Component部分的项目的typescript（.ts）文件中添加样式行

styles: [':host ::ng-deep .mat-form-field-underline {height: 0px!important}']

总体代码设计应如下所示：

@Component({
  selector: '',
  templateUrl: '',
  styleUrls: [''],
  styles: [':host ::ng-deep .mat-form-field-underline {height: 0px!important}']
})

这对我有用。
使用角度材质7.3这对我有用-要在文本框有焦点时更改下划线：

（在global styles.scss中）

颜色在材质主题中定义。您可以自定义自己的主题，选择自己的颜色：（）。角度10

component.sccs

    :host ::ng-deep .mat-form-field-underline {
        background-color: white !important; 
     }
     :host ::ng-deep .mat-focused .mat-form-field-underline .mat-form-field-ripple {
     background-color: white !important;
}
:host ::ng-deep input {
    color: white !important;
}
:host ::ng-deep input {
    color: white !important;
}

component.html

 <form>
    <mat-form-field>
        <mat-label id="placeholder" class="buscador">Buscar...</mat-label>
        <input type="text" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" type="text" name="option" required minlength="3">
        <mat-autocomplete #auto="matAutocomplete" name="option">
            <mat-option *ngFor="let option of options | async" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>


公共汽车。。。
{{option}}
也尝试使用十六进制颜色，但也不起作用。添加css不起作用吗？感谢您提供此代码片段，它可能会提供一些有限的即时帮助。A通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有其他类似问题的读者更有用。请在您的答案中添加一些解释，包括您所做的假设。此方法不适用于最新的角度版本。谢谢！您知道要覆盖光标颜色的属性吗？提前谢谢！这是我能找到的目前在Angular 6+中工作的唯一方法。删除视图封装是否有任何负面影响？使用视图封装。没有人会将这些样式泄漏到其他组件。总的来说，这不是一个好的做法。@JoãoIgnacio您是对的，最好添加第二个自定义类，以避免在
：：ng deep
方法不适用于最新角度版本的情况下错误分配它们。此方法不适用于最新角度版本。propa解决方案是这样的
    :host ::ng-deep .mat-form-field-underline {
        background-color: white !important; 
     }
     :host ::ng-deep .mat-focused .mat-form-field-underline .mat-form-field-ripple {
     background-color: white !important;
}
:host ::ng-deep input {
    color: white !important;
}
:host ::ng-deep input {
    color: white !important;
}

 <form>
    <mat-form-field>
        <mat-label id="placeholder" class="buscador">Buscar...</mat-label>
        <input type="text" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" type="text" name="option" required minlength="3">
        <mat-autocomplete #auto="matAutocomplete" name="option">
            <mat-option *ngFor="let option of options | async" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>