カスタムスタイルを追加したい入力のある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;
}
私の理解では、両方の機能はMatFormFieldにあるようです。
[floatLabel]
('never', 'always', 'auto'
)が入力を使用して適用されるようになったためです[color]
で下線の色を変更できますが、テーマ('primary', 'accent', 'warn'
)からのみ色を選択できます。テーマの設定方法の詳細については、 それらのWebサイト にアクセスしてください。<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>
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;
}
}
Focused:(選択した場合)
::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
を使用して、deprecatedである::ng-deep
を回避することもできます。
import { ViewEncapsulation } from '@angular/core';
@Component({
...
encapsulation: ViewEncapsulation.None
})
以下で使用する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材料チームが将来、それらの特異性を引き戻すことを願っています。現在、デフォルトをオーバーライドする簡単な方法はないからです。