Angular マテリアルのマット選択パネルをスタイル設定するには?

Angular マテリアルでのマット選択パネルのスタイリング

問題

panelClass を使用してマット選択コンポーネントのパネルをカスタマイズするとき、HTML テンプレートでクラスが適切に割り当てられているにもかかわらず、CSS スタイルが適用されません。

解決策

Angular 9 以降のバージョンの場合:

<code class="css">.mat-select-panel {
    background: red;
    ....
}</code>

Angular 2.0.0 の場合- beta.12 以前のバージョンでは、パネルのスタイルを設定するためのオプションがいくつかあります。

オプション 1: ::ng-deep を使用する

このメソッドは ::ng を利用します。 - コンポーネントのビューのカプセル化を貫通するためのディープ コンビネータ:

<code class="css">::ng-deep .mat-select-content{
    width:2000px;
    background-color: red;
    font-size: 10px;   
}</code>

オプション 2: ViewEncapsulation の使用

コンポーネントのメタデータでカプセル化モードを None に設定することで、CSS スタイルがコンポーネントのビュー内でカプセル化されなくなりました:

<code class="typescript">import {ViewEncapsulation } from '@angular/core';

@Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  </code>

オプション 3: style.css でクラス スタイルを設定

スタイルを .mat-select- に直接適用します。外部 style.css ファイルの content クラス、! important を使用して適用を強制します:

<code class="css"> .mat-select-content{
   width:2000px !important;
   background-color: red !important;
   font-size: 10px !important;
 } </code>

オプション 4: インライン スタイルを使用する

ファイル内で直接インライン スタイルを定義します。 HTML テンプレート:

<code class="html"><mat-option style="width:2000px; background-color: red; font-size: 10px;" ...></code>

以上がAngular マテリアルのマット選択パネルをスタイル設定するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。