web-dev-qa-db-fra.com

Comment écraser deux styles de matériaux angulaires?

J'ai cette sélection en matériau angulaire:

 enter image description here

Son code:

<md-select placeholder="Descuentos y convenios" [(ngModel)]="passenger.discount">
        <md-option [value]="null" [disabled]="true">
            Descuentos
        </md-option>
        <md-option *ngFor="let option of discounts" [value]="option">
            {{ option }}
        </md-option>
        <md-option [value]="null" [disabled]="true">
            Convenios
        </md-option>
        <md-option *ngFor="let option of agreements" [value]="option">
            {{ option }}
        </md-option>
</md-select>

Et j'aimerais avoir ce style dedans:

 enter image description here

J'ai essayé de mettre quelques classes sur md-select et md-option, mais cela n'a pas fonctionné .. Je voudrais peut-être avoir juste un exemple montrant comment mettre la couleur de fond ou la bordure et cela me donnerait une idée.

Merci d'avance 

cssangularangular-material
13
Kimy BF

Je pense que les classes devraient fonctionner, mais vous devrez peut-être utiliser /deep/ à cause de l'encapsulation de la vue.

Essaye ça:

/deep/ md-select.your-class {
  background-color: blue;
}

Vous pouvez également jouer avec theming .

31
André

Si vous parvenez à résoudre vos problèmes de style avec le matériau 2 scss theming, c’est la bonne façon d’entendre un lien vers leur site . https://material.angular.io/guide/theming .

Cependant, j'ai utilisé! Important sur les styles, je ne voulais pas que les styles de matériaux soient écrasés.

Voici comment je l'ai utilisé:

/*hack to get rid of a scrollbar*/
.cdk-focus-trap-content{
    overflow-x: hidden !important;
}

/*hack to get rid of a padding on the popup*/
.mat-dialog-container{
     padding: 0px !important;
 }

J'ai eu une situation où une barre de défilement horizontale apparaissait dans le md-sidenav et je me suis débarrassé de leur remplissage par défaut sur le md-dialog.

Pas la solution la plus élégante mais j'espère que cela aide.

Ceci est une autre question de StackOverflow qui traite de ce qui est! Important.

Que signifie! Important en CSS?

9
KJR

Les meilleures solutions de /deep/, >>> et ::ng-deep sont obsolètes et ne doivent plus être utilisées.

La méthode recommandée est maintenant de voir l'encapsulation

Edit: Mot d’avertissement. Je ne recommande pas du tout d'utiliser cette méthode (à compter de janvier 2019) car définir ViewEncapsulation.Aucun de ces composants ne deviendra un style global (il empêche Angular de créer des attributs ng_xxx pour le composant scoped css). Cela entraînera un conflit de style global, en particulier avec le module css chargé paresseux.

Notre solution à ViewEncapsulation consistait à remplacer des CSS très spécifiques à l'aide de sélecteurs CSS très spécifiques dans 1) des fichiers CSS globaux ou 2) créant des fichiers de style distincts pour certains affichages/styles/éléments, importés dans chaque composant requis (exemple: styleUrls: [material-table-override.css, component.css]) .

J'ai utilisé ViewEncapsulation.None pour remplacer avec succès les styles de table de matériau dans un seul composant dans Angular 6.

Sur votre composant:

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

Voici un excellent article sur le sujet

6
Avolition

Pour modifier les styles des classes de superposition, comme mat-dialog-container, vous devez utiliser panelClass selon Personnalisation des styles de composant Matériau angulaire :

Ajoutez ceci à votre feuille de style globale après la configuration de votre thème

.myapp-no-padding-dialog .mat-dialog-container {
  padding: 0;
}

Utilisez ce qui suit pour ouvrir la boîte de dialogue

this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})
4
Florian Feldhaus

Vous pouvez essayer d'ajouter ce code.

.mat-dialog-container{
     padding: 0px !important;
}

Si cela ne fonctionne pas, vous pouvez utiliser 

/deep/.className {
... your code goes here
}
1
Prashanth Damam