Angular Material Botão cor de plano de fundo não muda com a aplicação de css

Question 1

Estou a desenvolver um projecto de exemplo Angular 13 no que eu tenho usado Angular tema Material. Em um dos componentes de eu ter usado material de botões para logout de diálogo de confirmação de janela e eu mudei o botão cor de fundo para branco, css, mas quando eu executar o projeto ele ainda mostra o padrão de cor cinza, mesmo depois de aplicar css. Existe alguma maneira de forçar a mudança angular material de cores, porque o que eu tenho usado não está funcionando.

Abaixo estão os arquivos de código para melhor compreensão

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-diálogo.componente.css

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

Imagem

Alguma solução por favor ?

Question 2

Tente colocar o estilo do seu styles.css arquivo

Question 3

você pode tentar com 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

Talvez você pode tentar usar ::ng-deep seletor de

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

Tente colocar o estilo do seu styles.css arquivo

Kibé M.C

2021-11-24 09:23:52

Oi Kibe M. C eu tentei colocar isso em grande estilo.o css mas não funciona

Mohit Kumar Sharma

Tente examinar esse elemento em particular pressionando ctrl+shift+i sobre o seu browser, e aplicar o seu CSS sobre ele.

Kibé M.C

Oi Kibé M. C , eu tentei inspecioná-lo, ele mostra a cor aplicada em css, mas não no navegador

Mohit Kumar Sharma

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

você pode tentar com 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>

Oi Dako patel inline css aplicadas, mas não está funcionando

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

Talvez você pode tentar usar ::ng-deep seletor de

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

Angular Material Botão cor de plano de fundo não muda com a aplicação de css

Pergunta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria