J'utilise deux composants de forme matérielle angulaire dans un seul composant:
<!-- First input -->
<mat-form-field>
<mat-label>Password</mat-label>
<input matInput type="text">
</mat-form-field>
<br>
<!-- Second input -->
<mat-form-field>
<mat-label>Password</mat-label>
<input matInput type="text">
</mat-form-field>
Avant que ces champs de saisie ne soient ciblés, ils devraient regarder ceci
J'ai besoin de la couleur bleue pour le première étiquette de tapis d'entrée lorsqu'elle est focalisée et que l'étiquette flotte dans le coin supérieur gauche.
Pour la deuxième entrée mat-label , Je veux de la couleur noire
Quelqu'un peut-il m'aider à atteindre cet objectif? Merci beaucoup
3 Réponses :
Essayez ci-dessous.
HTML
mat-form-field.mat-focused:first-child mat-label{
color:rgb(0, 255, 55);
}
mat-form-field.mat-focused:last-child mat-label{
color:red;
}
CSS
<!-- First input -->
<mat-form-field class="first">
<mat-label>Enter task 1</mat-label>
<input matInput type="text">
</mat-form-field>
<br>
<!-- Second input -->
<mat-form-field class="second">
<mat-label>Enter task 1</mat-label>
<input matInput type="text">
</mat-form-field>
Désolé, j'ai essayé. Ça ne marche pas. Il change la couleur du texte de l'étiquette lorsque les deux champs de texte ne sont pas focalisés.
mis à jour ma réponse. Essayez ceci. Cela devrait fonctionner maintenant.
Vous pouvez vous référer à l'exemple créé par moi. stackblitz.com/edit/… < / a>
Merci @Hardick, mais je cherche à sélectionner par le nom de la classe ici
Vous pouvez utiliser la directive :: ng-deep dans CSS pour styliser le composant enfant.
Mais dans votre contexte, l ' input fait partie de votre composant, vous pouvez donc le sélectionner avec mat-form-field input [matInput] {}
J'ai essayé :: ng-deep .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {color: blue; } mais il applique les styles globalement pour chaque champ de saisie de formulaire dans le projet. J'ai besoin d'appliquer les styles individuellement. Je ne travaille pas avec le thème des matériaux angulaires car ils sont également appliqués globalement
C'est normal, ajoutez une classe à votre mat-form-field ou à votre input [matInput] et sélectionnez-la, elle devrait ressembler à ceci: :: ng -deep mat-form-field.input-blue .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {couleur: bleu; }
ng-deep sera obsolète dans les futures versions d'Angular. stackoverflow.com/ questions / 47024236 /…
Continuez à utiliser :: ng-deep et ses alternatives jusqu'à ce qu'un remplacement soit créé.
Merci @MartinPaucot. Votre suggestion a fonctionné avec un léger changement. :: ng-deep .input-blue.mat-form-field.mat-form-field-can-float.mat-form -field-should-float .mat-form-field-label {couleur: bleu; } Merci beaucoup
Si vous voulez éviter :: ng-deep , vous pouvez appliquer des styles dans styles.css
.red-float.mat-focused label{
color:red !important;
}
styles.css :
<mat-form-field class="">
<input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>
<br>
<mat-form-field class="red-float">
<input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>
Démo p >
Vous pouvez attribuer une classe avec
[NgClass]pour remplacer le style de matériau. Ou, peut-être, vous pouvez essayer[NgStyle]mais je crois que l'override nécessitait un! Importantà la fin. C'est également à vous d'ajouter/ deep /si vous ne voulez pas que ces modifications soient reflétées ailleursLes étiquettes des deux champs de texte doivent toujours afficher la couleur «noire» lorsqu'elles ne sont pas focalisées. Une fois focalisé, le premier devrait montrer la couleur bleue et le second devrait montrer la couleur noire.
Que diriez-vous de définir un thème de tapis pour cela. Vous pouvez le définir globalement ou spécifique à un conteneur