我有一个带有输入的 mat-form-field,我想为其添加自定义样式,但是我在 Angular Material 官方网站上找不到任何关于此的文档。
我的最终目标是:
- 更改输入框选中后的下划线颜色
- 删除 float 标签(如果可能 - 我知道这是一项功能但现在已弃用)。
我目前还不是最擅长使用 Angular,但如果 JS 需要更改,那么我总能尽我最大的努力。
我只需要一点指导。
当前代码:
<form class="search-form">
<mat-form-field class="example-full-width">
<input class="toolbar-search" type="text" matInput>
<mat-placeholder>Search</mat-placeholder>
<mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
</mat-form-field>
</form>
当前的 CSS:
// Change text colour when inputting text
.toolbar-search, mat-placeholder {
color: white;
}
// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
background-color: white;
}
最佳答案
使用scss改变 Material 输入的样式:
标准:
::ng-deep .mat-form-field {
.mat-input-element {
color: slategray;
}
.mat-form-field-label {
color: slategray;
}
.mat-form-field-underline {
background-color: slategray;
}
.mat-form-field-ripple {
background-color: slategray;
}
.mat-form-field-required-marker {
color: slategray;
}
}
重点:(选中时)
::ng-deep .mat-form-field.mat-focused {
.mat-form-field-label {
color: #ff884d;
}
.mat-form-field-ripple {
background-color: #ff884d;
}
.mat-form-field-required-marker {
color: #ff884d;
}
.mat-input-element {
color: #ff884d;
}
}
无效:
::ng-deep .mat-form-field.mat-form-field-invalid {
.mat-input-element {
color: #ff33cc;
}
.mat-form-field-label {
color: #ff33cc;
.mat-form-field-required-marker {
color: #ff33cc;
}
}
.mat-form-field-ripple {
background-color: #ff33cc;
}
}
您还可以使用 ViewEncapsulation.None
来避免 ::ng-deep
,它已弃用:
import { ViewEncapsulation } from '@angular/core';
@Component({
...
encapsulation: ViewEncapsulation.None
})
关于javascript - Angular/Material 中的样式化 mat-form-field 输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48540533/