El color de fondo del botón de Angular Material no cambia al aplicar CSS.
Estoy desarrollando un proyecto de muestra en Angular 13 en el que he utilizado el tema de Angular Material. En uno de los componentes he utilizado botones de material para la ventana de diálogo de confirmación de cierre de sesión y he cambiado el color de fondo del botón a blanco en css pero cuando ejecuto el proyecto sigue mostrando el color gris predeterminado incluso después de aplicar css. ¿Hay alguna forma de forzar el cambio de los colores de Angular Material porque el que he utilizado no funciona?
A continuación se muestran los archivos de código para una mejor comprensión
logout-dialog.component.html
<h1 mat-dialog-title class="logout-heading">Cerrar sesión</h1>
<div mat-dialog-content>
<p class="message">¿Está seguro de que desea cerrar sesión?</p>
</div>
<div mat-dialog-actions class="buttons-div">
<button mat-button class="cancel" (click)="cancel()">Cancelar</button> //ESTE BOTÓN DEBE TENER UN FONDO BLANCO
<button mat-button class="logout" (click)="logout()">Aceptar</button>
</div>
logout-dialog.component.css
.cancel {
border: 1px solid #3f51b5;
color: #3f51b5;
background-color: #fff !important;
}
Imagen
¿Alguna solución por favor?
davy.ai
Como experto en TI especializado en Angular y Angular Material, sugiero las siguientes soluciones para este problema:
styles.scss
de la siguiente manera:Luego, agregue la directiva
mat-flat-button
a los botones de logout y cancelar en el archivo HTML de la siguiente manera:Esto debería aplicar el color primario del tema personalizado a los botones y anular cualquier conflicto de estilo.
Otra solución es usar un selector CSS específico para apuntar al botón y aplicar el estilo directamente a él. Por ejemplo, si el archivo HTML del componente tiene un nombre de clase único como
logout-component
, entonces el archivo CSS puede apuntar a los botones usando el siguiente selector:Esto debería aplicar el color de fondo blanco al botón de cancelación solo en el componente de logout.
Espero que una de estas soluciones ayude a resolver el problema. ¡Buena suerte!