web-dev-qa-db-fra.com

Manipuler Angular Style de formulaire d'entrée de matériel

Je suis nouveau sur Angular and Angular - Material (AM). Par défaut, AM Input Component affiche la couleur primary de votre palette jusqu'à ce que vous cliquiez sur le formulaire, puis modifie la valeur placeholder et la ligne de marqueur en couleur accent. Existe-t-il un moyen de manipuler le formulaire pour que la couleur d'accent soit toujours visible? En d'autres termes, le formulaire sera toujours mis en évidence. Le problème est que ma couleur principale est sombre et que l’arrière-plan de la page de mon site Web est également sombre. Par conséquent, la variable placeholder et la ligne de marqueur sont à peine visibles à moins que l’utilisateur clique sur le formulaire. Ce serait également un ajout de couleur Nice à la page de mon site.

Voici l'exemple du code HTML requis à partir de la documentation AM :

<md-input-container>
  <input mdInput placeholder="Favorite food" value="Sushi">
</md-input-container>

Vous pouvez ajouter color="accent" au input line, mais là encore, la couleur n'apparaît que lorsque l'utilisateur clique sur le formulaire.

Merci d'avance.

angularangular-material2
3
justinnoor.io

Vous pouvez ajouter ce qui suit dans le fichier css de votre composant:

/deep/ .mat-input-underline {
    background-color: #FF0000;    /* replace this color with your accent color hex code */
}

démo

6
Nehal

Vous pouvez utiliser le sélecteur css que vous utilisez ci-dessous:

/deep/ .mat-input-underline {
   background-color: white;
}

Le combinateur/deep/est destiné à être déconseillé dans Angular , il est donc préférable de s'en passer. Malheureusement, le .mat-input-underline de Angular est hautement spécifié, ce qui rend très difficile le remplacement sans utiliser/deep /

Le meilleur moyen que j'ai trouvé est d'utiliser un identifiant, ce qui vous permet une spécificité supérieure à celle des styles de matériau Angular par défaut. 

<form id="food-form" [formGroup]="form" (ngSubmit)="submit()">
  <mat-input-container>
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-input-container>

Ensuite, votre identifiant 'food-form' peut être utilisé pour cibler ce formulaire dans le fichier global.scss. Il ne peut pas être ciblé à partir du composant.scss sans casser votre encapsulation de vue. Si vous n'utilisez pas/deep /, le .mat-form-field-underline doit être modifié au niveau global. L'ondulation est la couleur utilisée lors de la sélection de l'entrée.

#food-form {
  .mat-form-field-underline {
    background-color: $accent;
  }
  .mat-form-field-ripple {
    background-color: $accent;
  }
}

J'espère que l'équipe Angular Material retirera sa spécificité à l'avenir car il n'existe actuellement aucun moyen facile de remplacer leurs valeurs par défaut. 

3
drinck

J'ai eu un problème similaire lors de l'ajustement avec la largeur de mon champ de formulaire. Lors de l'enquête, nous avons constaté que la réponse qui référencait la réponse de Nehal était correcte, mais également obsolète dans la dernière version 5.0.0-rcX, https://angular.io/guide/component-styles . J'ai continué à vérifier mes sélecteurs CSS, mais j'ai constaté que je devais changer ViewEncapsulation. 

Ce qui a fonctionné pour moi a été dans mon fichier css/scss (bien sûr, modifiez-le avec vos propres sélecteurs selon les besoins):

mat-input-container {
    // Your CSS here
}

Et dans mon fichier de composants ts:

@Component({
    selector: 'my-component-selector',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss'],
    encapsulation: ViewEncapsulation.None
})

Sans changer l'encapsulation, le sélecteur CSS ne serait pas appliqué.

Bonne chance!

2
Brian Bauman

Les solutions ci-dessus n'ont pas fonctionné pour moi ... Je comprends que les matériaux angulaires changent souvent de nom de classe et de style. Je devais le faire dans mon style.css global

.mat-form-field-underline {
  background-color: rgb(177, 140, 81) !important;
}

.mat-form-field-underline.mat-disabled {
  background-color: transparent !important;
}
1
Mike Axle

Chaque élément HTML généré à partir d'un composant matériel Angular se voit attribuer une classe mat-css class. Ils peuvent être utilisés pour le style.

Le composant d'entrée dont vous parlez contient des éléments imbriqués. Vous devez donc décider où vous souhaitez appliquer votre style.

Pour définir le style sur l'ensemble du wrapper d'entrée, utilisez:

.mat-input-wrapper {
    background: gray;
}

Inspectez le code HTML généré pour voir les classes pour les éléments les plus imbriqués, tels que mat-input-element.

1
Fredrik Lundin

CSS

input[class~="bg-transparente"] {
  background-color: transparent;
}

et dans votre entrée, faites ceci

HTML

 <input matInput class="bg-transparente">
0
Yandiro