Comment styliser le panneau de sélection de tapis de matériau angulaire ?

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

Problème

Lors de la personnalisation du panneau du composant de sélection de tapis à l'aide de panelClass , les styles CSS ne s'appliquent pas malgré une affectation de classe appropriée dans le modèle HTML.

Solution

Pour Angular 9 et versions ultérieures :

<code class="css">.mat-select-panel {
    background: red;
    ....
}</code>

Pour Angular 2.0.0- beta.12 et versions antérieures, il existe plusieurs options pour styliser le panneau :

Option 1 : Utilisation de ::ng-deep

Cette méthode utilise le ::ng -combinateur profond pour pénétrer l'encapsulation de la vue du composant :

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

Option 2 : Utilisation de ViewEncapsulation

En définissant le mode d'encapsulation sur Aucun dans les métadonnées du composant, les styles CSS ne sont plus encapsulés dans la vue du composant :

<code class="typescript">import {ViewEncapsulation } from '@angular/core';

@Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  </code>

Option 3 : Définir le style de classe dans style.css

Appliquer les styles directement au .mat-select- content classe dans le fichier style.css externe, en utilisant !important pour forcer l'application :

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

Option 4 : Utiliser le style en ligne

Définir les styles en ligne directement dans le Modèle HTML :

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

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!