提问人：physicsboy 提问时间：1/31/2018 最后编辑：Iancoviciphysicsboy 更新时间：7/5/2022 访问量：156719
在 Angular/Material 中设置垫形字段输入的样式
Styling mat-form-field input in Angular/Material
问：
我有一个带有输入的 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;
}
答：
10赞
Iancovici
1/31/2018
#1
据我了解，这两个功能似乎都在 MatFormField 中。
- floatPlaceholder 已弃用，因为现在它用于 FloatLabelType（），使用输入应用
[floatLabel]'never', 'always', 'auto' - 您可以通过输入更改下划线的颜色，但只能从主题中选择颜色 （）。有关如何设置主题的更多信息，请访问他们的网站，
[color]'primary', 'accent', 'warn'
<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>
评论
14赞
David Rinck
9/26/2018
#2
您可以使用下面使用的 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>
然后，您的“search-form”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 团队在未来收回它们的特殊性，因为目前没有简单的方法来覆盖它们的默认值。
评论
1赞
Bryan McGrane
1/6/2019
更高的特异性对我有用，但我还需要在我打算设置样式的组件上使用 ViewEncapsulation.None。谢谢！
1赞
raven39
7/30/2019
非常感谢你，这对我有用！我还需要添加ViewEncapsulation:)<3
54赞
A. Morel
1/29/2019
#3
要使用 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::ng-deep
import { ViewEncapsulation } from '@angular/core';
@Component({
...
encapsulation: ViewEncapsulation.None
})
评论
1赞
ColinWa
4/15/2021
感谢您提供已弃用的信息。帮了大忙
0赞
Ahmet Emrebas
7/5/2022
#4
这是免费的终极解决方案。
.mat-form-field input {
height: 20px;
transition: height ease-in-out 400ms;
}
.mat-form-field input:focus {
background-color: red !important;
height: 50px;
transition: height ease-in-out 400ms;
}这些是用于边框的，应该在主样式.css中定义。
.mat-form-field-outline-start,
.mat-form-field-outline-end {
border-radius: 0px !important;
}并以“标准”、“轮廓”、“填充”的外观风格为基础。您将拥有如下所示的 CSS 类。
.mat-form-field-outline {}
.mat-form-field-fill {}
.mat-form-field-standard {}要设置所有按钮的样式，可以使用 mat-button-base 类。
.mat-button-base {
border-radius: 0px !important;
}!重要提示：这些样式应在主样式文件中定义！否则，它们不会应用于元素！
评论