Comment styliser le panneau de sélection de tapis dans un matériau angulaire : un guide des différentes techniques

Style du panneau de sélection de tapis dans un matériau angulaire

Pour styliser le panneau de sélection de tapis, vous pouvez spécifier une classe de panneau personnalisée dans le balisage HTML , comme vous l'avez fait :

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

Cependant, l'application de styles CSS à cette classe de panneau personnalisée peut parfois s'avérer problématique. Explorons plusieurs solutions possibles :

1. Utilisation de ::ng-deep :
   Utilisez le combinateur descendant ::ng-deep shadow-piercing pour forcer les styles à travers l'arborescence des composants enfants :

   <code class="css">::ng-deep .mat-select-content{
       width:2000px;
       background-color: red;
       font-size: 10px;   
   }</code>

2. Utilisation de ViewEncapsulation :
   Définissez le mode d'encapsulation sur ViewEncapsulation.None pour rompre l'encapsulation de la vue et appliquer les styles directement depuis le composant :

   <code class="typescript">@Component({
       ....
       encapsulation: ViewEncapsulation.None
   })  </code>

3. Ajout de styles à style.css :
   Forcer les styles à l'aide du mot-clé !important :

   <code class="css">.mat-select-content{
      width:2000px !important;
      background-color: red !important;
      font-size: 10px !important;
    } </code>

4. Incorporation des styles en ligne :
   Appliquer les styles en ligne directement à l'élément mat-option :

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

Ces les méthodes devraient vous permettre de styliser avec succès le panneau de sélection de tapis dans Angular Material.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!