Bonjour à tous, 

J'aimerai savoir quelle peut-être la meilleure façon (s'il y en a une) de surcharger des composants de angular-material. 

Supposons que j'ai un élément de ce type, et que je souhaite en modifier la largeur : 

<mat-card>Simple card</mat-card>

On pourrait le faire de différente façon.

En visant directement l'élément HTML <mat-card> :

mat-card {
width : 50%;
}

En visant la class .mat-card qui existe nativement au sein de l'élément <mat-card> : 

.mat-card {
width : 50%;
}

En visant une class custom que j'aurai intégré à l'élément <mat-card> : 

<mat-card class="custom-card">Simple card</mat-card>

.custom-card {
width : 50%;
}

On pourrait pas faire mettre le CSS en inline dans le HTML mais ce ne serait pas jojo. 

Donc quelle serait la meilleure façon de faire ? En faisant mes recherches, j'ai l'impression que les gens utilisent plus la class custom, mais j'ai pas trouvé de réponses précises. 

Merci !  

Salut,

Ajouter ta propre classe.

La première façon ne marchera pas car la balise mat-card n'est pas une balise html, c'est un composant angular, et il sera transformée en div à la compilation (sauf si le CSS est scopé, mais reste que c'est une mauvaise idée).

La seconde fonctionnera, mais impactera tous les composants aveuglément.

Donc, la troisième est la bonne réponse.

Merci de ta réponse :) 

Pour préciser, la plupart du temps j'ai utilisé la classe de l'élément material que j'utilise (.mat-card par exemple), mais dans le style du component Angular, donc ça n'impacte pas tous les autres components :) 

Mais en effet créer ma propre classe me semblait aussi être la façon la plus judicieuse de procéder.