web-dev-qa-db-fra.com

Sélectionner un tapis de style dans Angular Matériau

Comment styler un composant du panneau mat-select. D'après la documentation que je reçois, je dois fournir panelClass et je la fais comme ceci:

<mat-form-field>
  <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>
</mat-form-field>

J'ai vérifié dans les outils de développement que cette classe était liée au panneau dans DOM et qu'elle était associée. J'ai donc ma classe scss personnalisée attachée à cet élément. Maintenant, lorsque je fournis des CSS, cela ne fonctionne tout simplement pas. Mon scss par exemple ressemble à ceci:

.my-select-panel-class {
    width:20px;
    max-width:20px;
    background-color: red;
    font-size: 10px;
}

La largeur du panneau est toujours égale à la width de l'élément select. Parfois, dans les options Vous avez des chaînes trop longues et j'aimerais les élargir un peu. Est-il possible de faire cela? Mon style de mon composant ne fonctionne tout simplement pas même background-color ne fonctionne pas. Est-ce que quelqu'un sait pourquoi cela se comporte si étrange?

J'utilise: Angular 4.4.5 @ angulaire/matériel: 2.0.0-beta.12

cssangulartypescriptangular-material
39
Marcin Kapusta

Matériau angulaire utilise mat-select-content comme nom de classe pour le contenu de la liste de sélection. Pour son style, je suggère quatre options.

1. Utilisez :: ng-deep :

Utilisez le combinateur descendant/deep/shadow-piercing pour forcer un style dans l'arborescence des composants enfants dans toutes les vues de composants enfants. Le/deep/combinator fonctionne à n’importe quelle profondeur de composants imbriqués et s’applique à la fois aux enfants de vue et aux enfants de contenu du composant. Utilisez/deep /, >>> et :: ng-deep uniquement avec l’encapsulation de vue émulée. Emulated est l'encapsulation de vue par défaut et la plus utilisée. Pour plus d'informations, voir la section Encapsulation de la vue de contrôle. Le combinateur de descendants perçant les ombres est déconseillé et la prise en charge est supprimée des principaux navigateurs et outils. En tant que tel, nous prévoyons de supprimer le support dans Angular (pour les 3 valeurs de/deep /, >>> et :: ng-deep). Jusque-là: ng-deep devrait être préféré pour une compatibilité plus large avec les outils.

CSS: 

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

DÉMO

2. Utilisez ViewEncapsulation

... les styles CSS des composants sont encapsulés dans la vue du composant et n'affectent pas le reste de l'application. Pour contrôler le fonctionnement de cette encapsulation par composant, vous pouvez définir le mode d'encapsulation de la vue dans les métadonnées du composant. Choisissez parmi les modes suivants: .... Aucun signifie que Angular ne visualise pas l'encapsulation. Angular ajoute le CSS aux styles globaux. Les règles de cadrage, les isolements et les protections décrits précédemment ne s'appliquent pas. Cela revient essentiellement à coller les styles du composant dans le code HTML.

Aucune valeur n'est ce dont vous aurez besoin pour casser l'encapsulation et définir le style de matériau de votre composant. Alors peut définir sur le sélecteur du composant:

Texte écrit: 

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })

CSS

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

DÉMO

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

Cette fois, vous devez aussi "forcer" les styles avec !important.

style.css 

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

DÉMO

4. Utiliser le style en ligne 

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

DÉMO

71
Vega

Mettez votre nom de classe sur l'élément mat-form-field. Cela fonctionne pour toutes les entrées.

4
Lee Grindon