Comment styliser efficacement le panneau « mat-select » dans un matériau angulaire ?

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

Dans Angular Material, le style du composant du panneau de sélection de tapis peut être obtenu grâce à diverses approches. Malgré la définition de l'attribut panelClass, vous pouvez rencontrer des problèmes de style. Cet article aborde ce défi et propose des solutions efficaces.

Utilisation de ::ng-deep (Shadow-Piercing Descendant Combinator)

Cette méthode vous permet de forcer les styles à travers composants enfants à l'aide du combinateur ::ng-deep. Cependant, notez que sa prise en charge est supprimée des navigateurs et qu'il est recommandé d'utiliser ::ng-deep pour une compatibilité plus large.

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

Utilisation de ViewEncapsulation Aucun

En définissant le mode d'encapsulation de la vue sur Aucun, vous désactivez l'encapsulation d'Angular et autorisez les styles à affecter l'ensemble de l'application.

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

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

Définition du style de classe dans style.css

Appliquez les styles avec !important pour remplacer les styles internes d'Angular.

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

Utilisation des styles en ligne

Appliquez les styles directement à l'élément mat-option.

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

Notes supplémentaires pour Angular 9

Pour les versions Angular 9 et supérieures, le nom de la classe CSS pour le contenu de la liste de sélection a été changé en mat-select-panel. Par conséquent, utilisez la syntaxe suivante :

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

Envisagez d'essayer ces méthodes pour styliser efficacement la sélection de tapis et résoudre les problèmes de style que vous pourriez rencontrer.

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!