Angulaire Matériau Bouton couleur d'arrière-plan ne change pas sur l'application de css

Question 1

Je suis en train d'élaborer un projet d'exemple dans Angulaire 13, dans lequel j'ai utilisé Angulaire thème Matériau. Dans les composants, j'ai utilisé le matériel boutons de boîte de dialogue de déconnexion de la fenêtre et j'ai changé le bouton couleur d'arrière-plan blanc dans les css mais quand je lance le projet, il affiche toujours la valeur par défaut couleur gris même après l'application de css. Est-il un moyen de forcer un changement de l'angle de matériel de couleurs, car celui que j'ai utilisé n'est pas de travail.

Ci-dessous sont les fichiers de code pour mieux comprendre

logout-dialog.component.html

<h1 mat-dialog-title class="logout-heading">Logout</h1>
<div mat-dialog-content>
  <p class="message">Are you sure you want to logout ?</p>
</div>
<div mat-dialog-actions class="buttons-div">
  <button mat-button class="cancel" (click)="cancel()">Cancel</button> //THIS BUTTON SHOULD HAVE WHITE BACKGROUND
  <button mat-button class="logout" (click)="logout()">Ok</button>
</div>

déconnexion-boîte de dialogue.composante.css

.cancel {
  border: 1px solid #3f51b5;
  color: #3f51b5;
  background-color: #fff !important;
}

Image

Toute solution s'il vous plaît ?

Question 2

Essayez de placer le style de votre styles.css fichier

Question 3

pouvez-vous essayer avec inline-css

<h1 mat-dialog-title class="logout-heading">Logout</h1>
<div mat-dialog-content>
  <p class="message">Are you sure you want to logout ?</p>
</div>
<div mat-dialog-actions class="buttons-div">
  <button style="background-color: #fff !important;" mat-button class="cancel" (click)="cancel()">Cancel</button>  //my changes
  <button mat-button class="logout" (click)="logout()">Ok</button>
</div>

Question 4

Peut-être que vous pouvez essayer d'utiliser ::ng-deep sélecteur

::ng-deep button.cancel {
  border: 1px solid #3f51b5;
  color: #3f51b5;
  background-color: #fff !important;
}

Kibé M.C · Answer 1 · 2021-11-24T09:23:52

0

Essayez de placer le style de votre styles.css fichier

Kibé M.C

2021-11-24 09:23:52

Salut Kibe M. C, j'ai essayé de le placer dans le style.le css mais ne fonctionne pas

Mohit Kumar Sharma

Essayez l'inspection de cet élément en appuyant sur ctrl+shift+i sur votre navigateur, et de l'application de votre CSS sur elle.

Kibé M.C

Salut Kibé M. C , j'ai essayé de l'inspecter, il montre la couleur appliquée dans le css mais pas sur navigateur

Mohit Kumar Sharma

Dako patel · Answer 2 · 2021-11-24T09:29:20

pouvez-vous essayer avec inline-css

<h1 mat-dialog-title class="logout-heading">Logout</h1>
<div mat-dialog-content>
  <p class="message">Are you sure you want to logout ?</p>
</div>
<div mat-dialog-actions class="buttons-div">
  <button style="background-color: #fff !important;" mat-button class="cancel" (click)="cancel()">Cancel</button>  //my changes
  <button mat-button class="logout" (click)="logout()">Ok</button>
</div>

Farith Adnan · Answer 3 · 2021-11-25T04:29:37

Peut-être que vous pouvez essayer d'utiliser ::ng-deep sélecteur

::ng-deep button.cancel {
  border: 1px solid #3f51b5;
  color: #3f51b5;
  background-color: #fff !important;
}

Salut Farith Adnan, j'ai essayé mais cela ne fonctionne pas bien

Angulaire Matériau Bouton couleur d'arrière-plan ne change pas sur l'application de css

La question

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie