web-dev-qa-db-fra.com

Passer outre Angular Style de matériau dans Angular composant

J'utilise Material 2 <md-input-container> dans mon composant Angular. Je souhaite remplacer l'une des classes, par exemple .mat-input-wrapper défini dans Angular Material. Mais je veux remplacer uniquement dans ce composant et le remplacement ne devrait pas affecter les autres composants de la page.

Voici la capture d'écran de l'élément rendu:  Rendered md-input-container

angularangular-material2
5
nullDev

Comme @Dylan l'a souligné, vous devez utiliser /deep/ pour modifier le code CSS dans les composants enfants. Voici la réponse que je cherchais:

:Host /deep/ md-input-container .mat-input-wrapper

11
nullDev

Il n'est pas nécessaire de boucler avec <div class="someCssClassName">. Plutôt nommer un Angular élément matériel comme le titre d'une carte.

<mat-card>
   <mat-card-title>
      {{title}}
   </mat-card-title>
</mat-card>

CSS:

mat-card mat-card-title {
   color: red;
}

Appliquer cela à un autre élément 'enfant' comme <mat-card-content>

mat-card mat-card-content,
mat-card mat-card-title {
   color: red;
}

En utilisant VS Code, le survol de l’éditeur CSS révélera des détails sur le rendu de ce CSS. Dans cet exemple, <mat-card>...<mat-card-title>

Bien entendu, si vous utilisez la carte dans le même composant pour plusieurs utilisations, vous devrez faire la distinction avec un nom de classe CSS en ajoutant le class="card-style-1" à l'élément lui-même, comme <mat-card class="card-style-1".

CSS:

mat-card.card-style-1 mat-card-content,
mat-card.card-style-1 mat-card-title {
   color: red;
}

L'alternative consiste à créer des composants individuels spécifiques aux utilisations de différentes cartes, en les stylant à la demande.

1
Adam Cox

La solution à privilégier serait probablement de définir les styles dans votre propre feuille de styles de thème. L'utilisation de/deep/est obsolète (Angular V 4.3): https://angular.io/guide/component-styles#special-selectors

Vous pouvez maintenant utiliser :: ng-deep at comme alternative à la définition de votre propre feuille de style de thème.

Cependant, l'utilisation de :: ng-deep peut influencer à nouveau l'utilisation des icônes de matériau lors de son utilisation pour remplacer une famille de polices par défaut (car Material Icons est également une famille de polices).

0
Messchendorp