Angular Materialでmat-selectをスタイリングする

質問

mat-selectのパネルコンポーネントをどのようにスタイルするのですか。ドキュメントから、私は私がpanelClassを提供する必要があることを得るので、私はこのようにそれを作る。

<mat-form-field>
  <mat-select placeholder="Search for"
    [(ngModel)]="searchClassVal"
    panelClass="my-select-panel-class"
    (change)="onSearchClassSelect($event)">
    <mat-option *ngFor="let class of searchClasses" [value]="class.value">{{class.name}}</mat-option>
  </mat-select>
</mat-form-field>

このクラスがDOMのパネルにアタッチされていることをデベロッパーツールで検査したところ、アタッチされていました。だから私はこの要素に添付された私のカスタムScssクラスを持っています。今、私はcssを提供するとき、それはちょうど動作しません。例えば、私のscssは次のようになります。

.my-select-panel-class {
    width:20px;
    max-width:20px;
    background-color: red;
    font-size: 10px;
}

パネルの幅は常に width のselect要素の幅になります。時々オプションで 長すぎる文字列があるので、もう少し幅を広くしたいです。これを行う方法はありますか？私のコンポーネントからの私のスタイルがちょうどさえ動作しません background-color も機能しません。なぜこのような奇妙な動作になるのか、誰か知っていますか？

私は使用しています。 Angular 4.4.5 アンギュラー/マテリアル: 2.0.0-beta.12

どのように解決するのですか？

Angular9+の場合、以下のようになります。 この を使用することができます。

.mat-select-panel {
    background: red;
    ....
}

デモ

---

Angularマテリアルは mat-select-content をセレクトリストコンテンツのクラス名として使用します。そのスタイリングのために、私は4つのオプションを提案します。

1. 使用方法 ::ng-deepを使用する。 :

子コンポーネントツリーを通してすべての子コンポーネントにスタイルを強制的に適用するには、/deep/ shadow-piercing descendant combinatorを使用します。 を子コンポーネントツリーを通してすべての子コンポーネント ビューに適用します。Deep/ コンビネータは、ネストされたコンポーネントのどの深さでも動作します。 また、ビューの子コンポーネントとコンテンツの子コンポーネントの両方に適用されます。 コンポーネントのビューの子とコンテンツの子の両方に適用されます。 /deep/、>>> および ::ng-deepは、エミュレートされたビュー・カプセル化でのみ使用してください。 Emulated は、デフォルトで最もよく使用されるビュー・カプセル化です。詳細は 詳細は、「ビュー・カプセル化の制御」セクションを参照してください。また シャドウ・ピアシング・ディセンダント・コンビネーターは非推奨で、主要なブラウザやツールでサポートが廃止されつつあります。 が廃止され、主要なブラウザやツールでサポートされつつあります。そのため、Angularでのサポートを停止する予定です。 のサポートを停止する予定です（/deep/, >>> と ::ng-deep の3つすべて）。それまでは ツールとのより広い互換性のために、::ng-deepを優先してください。 ツールとのより広い互換性のために、それまでは ::ng-deep を優先する必要があります。

CSSです。

::ng-deep .mat-select-content{
    width:2000px;
    background-color: red;
    font-size: 10px;   
}

デモ

---

2. 使用方法 ViewEncapsulation

... コンポーネントの CSS スタイルはコンポーネントのビューにカプセル化され アプリケーションの残りの部分には影響を与えません。 このカプセル化の方法をコンポーネントごとに制御するには、コンポーネントのメタデータでビューのカプセル化モードを設定します。 コンポーネントのメタデータで、ビューのカプセル化モードを設定することができます。 以下のモードの中から選んでください。 .... Noneは、Angularがビューカプセル化を行わないことを意味します。Angularはグローバルスタイルに CSSをグローバルスタイルに追加します。先ほど説明したスコープルール、分離、保護は適用されません。 保護は適用されません。これは本質的に コンポーネントのスタイルをHTMLに貼り付けるのと同じです。

None値は、カプセル化を解除し、コンポーネントからマテリアル・スタイルを設定するために必要なものです。 そのため、コンポーネントのセレクタに設定することができます。

Typscriptです。

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  

CSS

.mat-select-content{
    width:2000px;
    background-color: red;
    font-size: 10px;
}

デモ

---

3. style.cssでクラススタイルを設定する

今回、スタイルを「強制」するために !important も必要です。

style.css

 .mat-select-content{
   width:2000px !important;
   background-color: red !important;
   font-size: 10px !important;
 } 

デモ

---

4. インラインスタイルの使用

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

デモ