Angular Material Botón color de fondo no cambia en la aplicación de css

Question 1

Estoy desarrollando un proyecto de ejemplo en Angular 13 en el que he utilizado Angular tema Material. En los componentes que he usado material botones de confirmación para cerrar la sesión de diálogo de la ventana y me han cambiado el botón color de fondo a blanco en css pero cuando voy a ejecutar el proyecto que aún muestra el valor predeterminado en color gris, incluso después de aplicar css. Hay alguna forma de forzar el cambio angular material colores porque el que yo he usado no está funcionando.

A continuación están los archivos de código para una mejor comprensión

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

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

Imagen

Alguna solución por favor ?

Question 2

Trate de colocar el estilo en su styles.css archivo

Question 3

puedes intentar 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

Tal vez usted puede tratar de usar ::ng-deep selector 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

Trate de colocar el estilo en su styles.css archivo

Kibé M.C

2021-11-24 09:23:52

Hola Kibe M. C traté de colocación en el estilo.css pero no funciona

Mohit Kumar Sharma

Trate de la inspección de un elemento en particular pulsando ctrl+shift+i en su navegador, y la aplicación de la CSS en él.

Kibé M.C

Hola Kibé M. C , traté de inspección, se muestra la aplicación de color en css, pero no en el navegador

Mohit Kumar Sharma

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

puedes intentar 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>

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

Tal vez usted puede tratar de usar ::ng-deep selector de

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

Hola Farith Adnan, intenté pero no funcionó a pesar de que

Angular Material Botón color de fondo no cambia en la aplicación de css

Pregunta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría