web-dev-qa-db-fra.com

Matière angulaire: comment personnaliser .mat-select-panel

J'ai cette structure de HTML en utilisant Angular Material Select

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

J'ai placé une classe parce que j'utilise aussi Select dans d'autres composants. J'ai essayé d'ajouter 

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

dans CSS à personnaliser, mais le problème est que d'autres composants contenant une autre zone de sélection sont également affectés (hérite du CSS situé en marge)

Actuellement j'ai ce CSS

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

Mais ça ne marche toujours pas. 

METTRE À JOUR

Objectif: je veux que le panneau des options se déplace un peu vers le bas lors de l’ouverture de la zone de sélection. C’est pourquoi je veux que .mat-select-panel dispose d’une marge supérieure de 20%.

cssangularangular-materialmaterial-designangular-material2
3
Char

Utilisez cdk-overlay-container comme base et accédez au volet des options de cette manière, mat-select utilise une position absolue sans enfant. vous devez donc appliquer votre style à cdk-overlay-container

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

Voici la démo

Modifier:

Ok, donc vous avez un problème de conflit avec d'autres éléments que vous pouvez ajouter 

panelClass="testClass"

et 

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

Et change de classe comme ça

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

démo

4
Just code
  1. Si vous appliquez le style à la classe directement dans styles.css (racine) avec la balise,! Important, il écrasera tous les autres styles. Mais vous allez briser l'encapsulation en le faisant.
  2. Si vous appliquez des styles au composant à l'aide de/deep /, le style sera écrasé, mat-form-field/deep/(nom-classe) {} (Problèmes obsolètes) Veuillez lire https: //blog.angular -university.io/angular-Host-context/ pour une explication détaillée

  3. En raison de problèmes obsolètes, vous pouvez réellement essayer d’ajouter ou de supprimer des classes à l’aide de javascript dans Vanilla, mais la manipulation directe de dom est une pratique déconseillée.

    Résumé: L'utilisation de la syntaxe obsolète est mauvaise, appliquer un style au niveau racine posera des problèmes d'encapsulation, la manipulation directe de dom est une mauvaise pratique. Vous pouvez donc utiliser les outils fournis par angular pour manipuler le dom afin de résoudre les problèmes susmentionnés. sur les meilleures pratiques pour manipuler dom in angular https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

1
Akshay Rajput