我有一个带有输入的mat-form-field,我想添加一个自定义样式,但是我在官方Angular Material网站上找不到任何关于此的文档。
我最终的目标是:
我对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;
}
答案 0 :(得分:7)
要使用scss更改材料输入的样式:
标准:
::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
来避免被{strong> 弃用的::ng-deep
:
import { ViewEncapsulation } from '@angular/core';
@Component({
...
encapsulation: ViewEncapsulation.None
})
答案 1 :(得分:5)
根据我的理解,这两个功能似乎都在MatFormField中。
[floatLabel]
的FloatLabelType('never', 'always', 'auto'
),使用输入[color]
更改下划线的颜色,但是您只能从主题中选择颜色('primary', 'accent', 'warn'
)。有关如何设置主题的更多信息,请转到their website here,
<form class="search-form">
<mat-form-field class="example-full-width"
floatLabel="never" color="primary">
<input class="toolbar-search" type="text" matInput placeholder="search">
<mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
</mat-form-field>
</form>
答案 2 :(得分:3)
您可以使用下面使用的css选择器:
/deep/ .mat-input-underline {
background-color: white;
}
/ deep /组合器计划在Angular中弃用,因此最好不要使用它。不幸的是,来自Angular Material的.mat-input-underline被高度指定,这使得在不使用/ deep /
的情况下很难覆盖它。我发现最好的方法是使用ID,与默认的Angular Material样式相比,它可以为您提供更高的特异性。
<form id="search-form" [formGroup]="form" (ngSubmit)="submit()">
<mat-form-field>
<mat-placeholder class="placeholder">Search</mat-placeholder>
<input type="text" class="toolbar-search" matInput formControlName="search">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
然后,您的“搜索表单” ID可用于定位输入。在不破坏视图封装的情况下,您不能在component.scss中定位mat-form-field-underline。通过将其添加到global.scss
,可以更轻松地在全局级别执行此操作global.scss:
#search-form {
.mat-form-field-underline {
background-color: $accent;
}
.mat-form-field-ripple {
background-color: $accent;
}
.placeholder {
display: none;
}
}
我希望Angular Material团队在将来撤回其特殊性,因为目前尚无简便方法可以覆盖其默认设置。