Maison >interface Web >tutoriel CSS >Comment styliser efficacement des panneaux de sélection de tapis dans un matériau angulaire ?
Problème :
Dans la hiérarchie des composants de mat-select, l'attribut panelClass est utilisé pour définir les styles à appliquer au panneau. Cependant, appliquer des styles personnalisés au panneau à l'aide de cette méthode semble inefficace, laissant les développeurs perplexes.
Résoudre le problème :
Pour Angular 9 et supérieur :
Pour Angular 4.4. 5 et inférieur :
1. En utilisant ::ng-deep (DEPRECATED):
2. Exploitation de ViewEncapsulation :
3. Remplacement des styles dans style.css :
4. Style en ligne :
Exemple en Typescript (Méthode 2) :
<code class="typescript">import { ViewEncapsulation } from '@angular/core'; @Component({ encapsulation: ViewEncapsulation.None, })</code>
Exemple dans style.css (Méthode 3) :
<code class="css">.mat-select-content { width: 2000px !important; background-color: red !important; font-size: 10px !important; }</code>
En utilisant ces méthodes, les développeurs peuvent styliser efficacement les panneaux de sélection de tapis , répondant aux défis de personnalisation rencontrés 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!