web-dev-qa-db-ja.com

Angular Material Select：.mat-select-panel自体をカスタマイズする方法

私はAngular Material Selectを使用してこのhtmlの構造を持っています

<mat-form-field class="year-drpdwn-vacay-stock">
    <mat-select placeholder="Year">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let yr of year"  [value]="yr">{{yr}}</mat-option>
    </mat-select>
</mat-form-field>

他のコンポーネントでもSelectを使用しているため、クラスを配置しました。追加してみた

::ng-deep .mat-select-panel {
    margin-top: 20%; 
}

cSSでカスタマイズするが、問題は、別の選択ボックスを含む他のコンポーネントも影響を受ける（マージン上部のCSSを継承する）

現在私はこのCSSを持っています

.year-drpdwn-vacay-stock mat-select.mat-select :Host ::ng-deep .mat-select-panel {
    margin-top: 20%; 
}

しかし、それでも機能しません。

更新

目標：選択ボックスを開いたときにオプションパネルを少し下に移動させたいので、.mat-select-panel上マージンを20％にする

cssangularangular-materialmaterial-designangular-material2
6
Char

ベースとしてcdk-overlay-containerを使用して、このようなオプションペインに移動します。mat-selectは、子を含まない絶対位置を使用します。あなたのスタイルをcdk-overlay-containerに適用する必要があります

.cdk-overlay-container .cdk-overlay-pane{
   margin-top: 7%;
}

これが demo です

編集：

追加できる他の要素との競合問題があります

panelClass="testClass"

そして

<mat-select placeholder="Favorite food" panelClass="testClass">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

そして、あなたのクラスをこのように変えてください

.cdk-overlay-container .cdk-overlay-pane .testClass{
margin-top: 7%;
}

デモ

4
Just code
  1. Styles.css（ルート）でクラスにスタイルを直接適用すると、！importantタグによって他のスタイルが上書きされます。しかし、それを行うことによってカプセル化を壊します。
  2. / deep /を使用してコンポーネントにスタイルを適用すると、スタイルが上書きされます。mat-form-field/ deep /（class-name）{}（非推奨の問題）をお読みください https：/ /blog.angular-university.io/angular-Host-context/ の詳細な説明

  3. Deprecatingの問題があるため、実際にはVanilla JavaScriptを使用してクラスを追加/削除しようとすることができますが、domを直接操作することは悪い習慣です。

    概要：非推奨の構文の使用は不適切です。ルートレベルでスタイルを適用するとカプセル化の問題が発生します。domを直接操作することは不適切なため、angularが提供するツールを使用して解決するためにdomを操作できます上記の問題については、angular https://blog.angularindepth.com/exploring-angular-domでdomを操作するためのベストプラクティスについては、以下のリンクを参照してください。 -abstractions-80b3ebcfc02

1
Akshay Rajput

選択ボックスを開いたときにオプションパネルを少し下に移動するには、以下のように 'disableOptionCentering'属性を使用します。

<mat-select placeholder="Favorite food" disableOptionCentering>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
0
Karthik Raja Ayyanar