web-dev-qa-db-ja.com

Angularマテリアルでのマット選択のスタイル設定

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

パネルの幅は、常にselect要素のwidthと等しくなります。場合によっては、オプションの文字列が長すぎるので、少し広くしたいと思います。これを行う方法はありますか？ background-colorが機能していなくても、コンポーネントのスタイルが機能していません。なぜこれが非常に奇妙に振る舞うのか知っていますか？

私は使用しています：Angular 4.4.5 @ angular/material：2.0.0-beta.12

cssangulartypescriptangular-material
39
Marcin Kapusta

Angular Materialは、選択リストのコンテンツのクラス名としてmat-select-contentを使用します。そのスタイルについては、4つのオプションを提案します。

1。 :: ng-deep ：を使用します

/ deep/shadow-piercing子孫コンビネータを使用して、スタイルを子コンポーネントツリーからすべての子コンポーネントビューに強制的に下げます。/deep /コンビネータは、ネストされたコンポーネントの任意の深さで機能し、コンポーネントのビューの子とコンテンツの子の両方に適用されます。/deep /、>>>、および:: ng-deepは、エミュレートされたビューのカプセル化でのみ使用します。エミュレートはデフォルトであり、最も一般的に使用されるビューのカプセル化です。詳細については、「制御ビューのカプセル化」セクションを参照してください。シャドウピアスの子孫コンビネーターは非推奨になり、主要なブラウザーとツールからサポートが削除されます。そのため、Angular（/ deep /、>>>、および:: ng-deepの3つすべて）のサポートを削除する予定です。それまでは、ツールとの幅広い互換性のために:: ng-deepを優先する必要があります。

CSS：

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

DEMO

2。 ViewEncapsulationを使用します

...コンポーネントのCSSスタイルはコンポーネントのビューにカプセル化され、アプリケーションの他の部分には影響しません。コンポーネントごとにこのカプセル化がどのように行われるかを制御するには、コンポーネントメタデータでビューのカプセル化モードを設定できます。次のモードから選択します。...なしは、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;
}

DEMO

3。 style.cssでクラススタイルを設定します

今回は、!importantでもスタイルを「強制」する必要があります。

style.css

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

DEMO

4。インラインスタイルを使用する

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

DEMO

71
Vega

クラス名をmat-form-field要素に配置します。これはすべての入力に対して機能します。

4
Lee Grindon