如何在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

我解决了这个问题

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

Answer 3

问题源于View Encapsulation git issues

在你的CSS中进行更改

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

检查此Plunker以获取工作示例。

Answer 4

这就是我在Angular 6.0.1中删除我的方式

我知道它可以删除下划线，但是您可以按照相同的步骤来更改颜色，例如谢谢

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

Answer 5

将此添加到您的组件encapsulation: ViewEncapsulation.None中 它可以在角度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 6

您可以使用此

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

或者我做的是给angular材质元素一个类，并将它添加到styles.css或scss你正在使用的扩展名。所以它在样式中看起来像这样（这是一个全局样式表）

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

Answer 7

在您的CSS文件中添加

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

Answer 8

对于angular 6+，我们只需在@Component部分的项目的打字稿（.ts）文件中添加样式行即可。

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

总体代码设计应如下：

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

这对我有用。

Answer 9

使用有角材质7.3，这对我来说很有效-当文本框具有焦点时更改下划线：

（在global styles.scss中）

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

Answer 10

颜色是在主题中定义的。您可以自定义主题，选择颜色：（https://material.angular.io/guide/theming#defining-a-custom-theme）。

Answer 11

针对Angular 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>