web-dev-qa-db-ja.com

Angular / Materialでのmat-form-field入力のスタイル設定

カスタムスタイルを追加したい入力のある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;
}
javascripthtmlcssangularangular-material2
10
physicsboy

私の理解では、両方の機能はMatFormFieldにあるようです。

  1. floatPlaceholderは非推奨です。これは、FloatLabelTypeの[floatLabel]（'never', 'always', 'auto'）が入力を使用して適用されるようになったためです
  2. 入力[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>
6
Iancovici

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;
    }
}

[〜＃〜] demo [〜＃〜]

ViewEncapsulation.Noneを使用して、deprecatedである::ng-deepを回避することもできます。

import { ViewEncapsulation } from '@angular/core';

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})
12
A. Morel

以下で使用する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材料チームが将来、それらの特異性を引き戻すことを願っています。現在、デフォルトをオーバーライドする簡単な方法はないからです。

4
David Rinck