es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El color de fondo del botón de Angular Material no cambia al aplicar CSS.

01 Jun, 2023 Programación

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
El botón sigue teniendo un color gris después de aplicar css

¿Alguna solución por favor?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en TI especializado en Angular y Angular Material, sugiero las siguientes soluciones para este problema:

    1. Verifique si el archivo CSS se aplica correctamente al componente inspeccionando el elemento de botón en las herramientas de desarrollo del navegador. Si el archivo CSS no se aplica correctamente, intente importar el archivo CSS en el archivo TypeScript del componente de la siguiente manera: 
      import './logout-dialog.component.css';
    2. Si el archivo CSS se aplica correctamente pero el color de fondo del botón no está cambiando, intente usar el sistema de temas de Angular Material en lugar de aplicar CSS personalizado. Para hacer esto, cree un tema personalizado en el archivo styles.scss de la siguiente manera: 
      @import "~@angular/material/theming";
// Defina un tema personalizado
$my-theme: mat-light-theme((
  color: (
    primary: #3f51b5,
    accent: #ff4081,
  )
));

// Aplique el tema personalizado a la aplicación
@include mat-core();
@include angular-material-theme($my-theme);

      Luego, agregue la directiva mat-flat-button a los botones de logout y cancelar en el archivo HTML de la siguiente manera:

      <button mat-flat-button="" class="cancel" (click)="cancel()">Cancelar</button>
<button mat-flat-button="" class="logout" (click)="logout()">Ok</button>

      Esto debería aplicar el color primario del tema personalizado a los botones y anular cualquier conflicto de estilo.

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

      .logout-component button.cancel {
  background-color: #fff !important;
}

      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!

Comments are closed.