Angolare Materiale colore di sfondo del Pulsante non cambia applicare i css

Question 1

Sto sviluppando un progetto di esempio in Angolare 13 in cui ho usato Angolare Materiale a tema. Dei componenti che ho utilizzato materiale di pulsanti per il logout finestra di dialogo di conferma e ho cambiato il colore di sfondo del pulsante bianco in css, ma quando ho eseguito il progetto si mostra ancora il grigio di default del colore anche dopo l'applicazione di css. C'è un modo per forzare il cambiamento angolare materiale colori, perché quella che ho usato non è di lavoro.

Qui di seguito sono i file di codice per capire meglio

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>

logout-finestra di dialogo.componente.css

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

Immagine

Qualsiasi soluzione per favore ?

Question 2

Prova a mettere lo stile sul tuo styles.css file

Question 3

puoi provare con 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

Forse si può provare a utilizzare ::ng-deep selettore

::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

Prova a mettere lo stile sul tuo styles.css file

Kibé M.C

2021-11-24 09:23:52

Ciao Kibe M. C ho provato mettendo in grande stile.il css ma non funziona

Mohit Kumar Sharma

Provare l'ispezione di quel particolare elemento premendo ctrl+shift+i sul vostro browser, e di applicare il CSS su di esso.

Kibé M.C

Ciao Kibé M. C , ho provato l'analisi, mostra il colore applicato nel css, ma non sul browser

Mohit Kumar Sharma

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

puoi provare con 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>

Ciao Dako patel inline css applicato, ma non è che non funziona

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

Forse si può provare a utilizzare ::ng-deep selettore

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

Angolare Materiale colore di sfondo del Pulsante non cambia applicare i css

Domanda

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria