Javascript Angular/Material 中的样式 mat-form-field 输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48540533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling mat-form-field input in Angular/Material
提问by physicsboy
I have a mat-form-field with input that I am wanting to add a custom style to, however I cannot find any documentation regarding this on the official Angular Material website.
我有一个带有输入的 mat-form-field，我想向其中添加自定义样式，但是我在官方 Angular Material 网站上找不到任何关于此的文档。
My eventual goal is to:
我的最终目标是：
- Change the underline colour after the input box is selected
- Remove the floating label (if possible - I know this was a feature but now deprecated).
- 选择输入框后更改下划线颜色
- 删除浮动标签（如果可能 - 我知道这是一个功能，但现在已弃用）。
I'm not the most adept with Angular just yet, but if things need changing in JS, then I can always give it my best shot.
我还不是最擅长使用 Angular，但如果需要在 JS 中进行更改，那么我总是可以尽我所能。
I just need a little guidance.
我只需要一点指导。
Current Code:
当前代码：
<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>
Current CSS:
当前的 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;
}
采纳答案by Iancovici
From my understanding, both features seem to be in MatFormField.
根据我的理解，这两个功能似乎都在 MatFormField 中。
- floatPlaceholder is deprecated, because now it's
[floatLabel]for FloatLabelType ('never', 'always', 'auto'), applied using input - You can change the color of the underline with input
[color], however you can only select colors from your theme ('primary', 'accent', 'warn'). For more on how to setup the theme go to their website here,
- 不推荐使用 floatPlaceholder，因为现在它
[floatLabel]用于 FloatLabelType ('never', 'always', 'auto')，使用输入应用 - 您可以使用 input 更改下划线的颜色
[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>
回答by A. Morel
For change the styles of material inputs with scss:
使用 scss 更改材质输入的样式：
Standard:
标准：
::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;
}
}
Focused:(when selected)
重点：（选择时）
::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;
}
}
Invalid:
无效的：
::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;
}
}
you can also use ViewEncapsulation.Noneto avoid ::ng-deepwhich is deprecated:
您还可以使用ViewEncapsulation.None来避免弃用::ng-deep哪个：
import { ViewEncapsulation } from '@angular/core';
@Component({
...
encapsulation: ViewEncapsulation.None
})
回答by David Rinck
You can use the css selector you use below:
您可以使用下面使用的 css 选择器：
/deep/ .mat-input-underline {
background-color: white;
}
The /deep/ combinator is slated for deprecation in Angular, so its best to do without it. Unfortunately, the .mat-input-underline from Angular Material is highly specified, which makes it very difficult to override without using /deep/
该/深/组合子被提名为在角弃用，所以最好不用它做的事。不幸的是，Angular Material 的 .mat-input-underline 是高度指定的，这使得在不使用 /deep/ 的情况下很难覆盖
The best way I have found is to use an ID, which allows you a higher specificity compared to the default Angular Material styles.
我发现的最好方法是使用 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>
Then, your 'search-form' id can be used to target the input. You can't target the mat-form-field-underline in the component.scss without breaking your view encapsulation. It's easier to do this at the global level, by adding this to your global.scss
然后，您的“搜索表单”ID 可用于定位输入。您不能在不破坏视图封装的情况下定位 component.scss 中的 mat-form-field-underline。通过将其添加到您的 global.scss，在全局级别更容易执行此操作
global.scss:
global.scss：
#search-form {
.mat-form-field-underline {
background-color: $accent;
}
.mat-form-field-ripple {
background-color: $accent;
}
.placeholder {
display: none;
}
}
I hope the Angular Material team pulls back their specificity in the future, because currently there's no easy way to override their defaults.
我希望 Angular Material 团队在未来收回他们的特殊性，因为目前没有简单的方法来覆盖他们的默认值。
