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

マット選択の外観をカスタマイズする場合、パネル コンポーネントのスタイル設定で問題が発生する場合があります。

スタイルが機能しない理由

Angular マテリアルは mat-select を使用します。 -content を選択リストのコンテンツのクラス名として使用します。このコンポーネントのスタイルを設定するには、

1 のいくつかの方法が利用できます。 ::ng-deep

の使用::ng-deep シャドウピアシング子孫コンビネーターを使用して、子コンポーネントにスタイルを強制します。

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

2. ViewEncapsulation の使用

コンポーネントのビューのカプセル化を None に設定し、スタイルがコンポーネントの分離をエスケープできるようにします。

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

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

style.css ファイルを使用してカスタム スタイルを定義し、既存のスタイルをオーバーライドするために ! important を使用して強制します。

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

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

インライン スタイルを mat-option 要素に直接適用し、継承されたスタイルをオーバーライドします。