[英]Styling mat-form-field input in Angular/Material
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:我的最终目标是:
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;
}
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.None
to avoid ::ng-deep
which is deprecated : 您还可以使用
ViewEncapsulation.None
来避免不推荐使用的 ::ng-deep
:
import { ViewEncapsulation } from '@angular/core';
@Component({
...
encapsulation: ViewEncapsulation.None
})
From my understanding, both features seem to be in MatFormField. 根据我的理解,这两个功能似乎都在MatFormField中。
[floatLabel]
for FloatLabelType ( 'never', 'always', 'auto'
), applied using input [floatLabel]
的[floatLabel]
( 'never', 'always', 'auto'
),使用输入应用 [color]
, however you can only select colors from your theme ( 'primary', 'accent', 'warn'
). [color]
更改下划线的[color]
,但是您只能从主题中选择颜色( 'primary', 'accent', 'warn'
)。 For more on how to setup the theme go to 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>
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. / deep / combinator计划在Angular中弃用 ,因此最好不要使用它。 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. 然后,您的“搜索表单”ID可用于定位输入。 You can't target the mat-form-field-underline in the component.scss without breaking your view encapsulation.
您不能在不破坏视图封装的情况下在component.scss中定位mat-form-field-underline。 It's easier to do this at the global level, by adding this to your global.scss
通过将此添加到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团队在未来能够撤回他们的特异性,因为目前没有简单的方法来覆盖他们的默认值。
Here is the FREE ultimate solution.这是免费的终极解决方案。
.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; }
These are for the borders and should be defined in the main style.css.这些用于边框,应在主 style.css 中定义。
.mat-form-field-outline-start, .mat-form-field-outline-end { border-radius: 0px !important; }
And based on the appearance style of "standard", "outline", and "fill".并基于“标准”、“轮廓”和“填充”的外观样式。 You will have CSS classes as follows.
您将拥有如下的 CSS 类。
.mat-form-field-outline {} .mat-form-field-fill {} .mat-form-field-standard {}
To style all buttons, you can use the mat-button-base class.要设置所有按钮的样式,您可以使用 mat-button-base 类。
.mat-button-base { border-radius: 0px !important; }
!Important: These styles should be defined in the main style file! !重要提示:这些样式应该在主样式文件中定义! Otherwise, they are not applied to the elements!
否则,它们不会应用于元素!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.