我一直在阅读这个文档(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>
.mat-focused .mat-form-field-label {
color: #027D7C !important;
}
.mat-form-field-ripple {
background-color: #027D7C !important;
}
颜色在材质主题中定义。您可以自定义您自己的主题,选择您的颜色:(@Component({
selector: '',
templateUrl: '',
styleUrls: [''],
styles: [':host/deep/ .mat-form-field-underline {height: 0px!important}']
})
)。
我这样解决了
/deep/ .mat-input-underline{
border-bottom: 1px solid red!important;
}
这就是我在Angular 6.0.1中删除我的方法
我知道它用于删除下划线,但您可以按照相同的步骤更改颜色e.t.c.谢谢
/deep/ .mat-form-field-underline {
display: none;
}
在你的组件中添加它qazxsw poi它在角度6中工作
例如:
encapsulation: ViewEncapsulation.None
并在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;
}
View Encapsulation
在你的CSS中进行更改
git issues
检查这个@Component({
selector: 'input-overview-example',
templateUrl: 'input-overview-example.html',
styles: [':host/deep/ .mat-input-underline {background-color: red}']
})
的工作示例。
你可以用它
.mat-form-field.mat-focused .mat-form-field-ripple {
background-color: #69f0ae !important;
}
或者我做的是给angular材质元素一个类,并将它添加到styles.css或scss你正在使用的扩展名。所以它在样式中看起来像这样(这是一个全局样式表)
::ng-deep .mat-input-underline{
border-bottom: 1px solid red;
}
在你的CSS文件中添加
.mat-input-underline .<custom class name> {
put your info you want to change here.
}
对于angular 6+,我们可以在@Component部分的项目的typescript(.ts)文件中添加样式行。
.mat-form-field-underline {
background-color: black !important; // change black with your color
}
整体代码设计应如下所示:
styles: [':host/deep/ .mat-form-field-underline {height: 0px!important}']
这适合我。