0

Tengo 2 componentes, en 2 lugares diferentes de la app: un menu que contiene 2 expansion panel:

introducir la descripción de la imagen aquí

Y en otro lugar de la aplicacion, un componente que tambien tiene un expansion panel introducir la descripción de la imagen aquí

El problema que no se porque se pisan los estilos, ya de por si los estilos de Material me dan muchos problemas, para poder aplicar ciertos estilos a las clases propias de material, tuve que usar el ::ng-deep nameClass de material, como para el menu, de la siguiente forma:

Menu css:

::ng-deep .mat-expansion-panel-header{
  font-size: 20px;
  height: 20px;
  padding: 0 !important;
  border: none !important;
}

::ng-deep .mat-expansion-panel-body{
  padding: 0 !important;
}

::ng-deep .mat-expansion-indicator{
  width: 30px;
  height: 30px;
  margin-right: 0.5em;
  &::after{
    height: 7px !important;
    width: 7px !important;
  }
}

El problema que se ve que con este ::ng-deep afecta a todo lo que uses a lo largo de la app, si yo saco el ::ng-deep, de estos estilos (que repito,estan en la hoja de estilos del menu) se arregla sin hacer nada, los estilos de mi otro componente filtros, vean:

introducir la descripción de la imagen aquí

Pero claro, al hacer esto ahora los estilos que necesitaba para el otro no andan todos y queda desmaquetado:

A ustedes tambien les dan problemas los componentes de Material?

1 respuesta 1

0

Lo que te falta es aprender como funciona la encapsulación de estilos. Te dejo un enlace de eso: Angular ::ng-deep

ng-deep como lo mencionas hace que los estilos de un componente pierdan su encapsulación y por lo tanto afectan a otros componentes en la aplicación.

En tu caso para prevenir eso debes usar :host antes de ::ng-deep

:host ::ng-deep .mat-expansion-panel-header{
  font-size: 20px;
  height: 20px;
  padding: 0 !important;
  border: none !important;
}

:host permite que los estilos del componente se filtren pero solamente a los componentes hijos. En este caso se modifica el expansion-panel que es hijo del componente que tiene los estilos pero no se modifican los estilos de otros expansion-panel de la aplicación.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.