Tengo 2 componentes, en 2 lugares diferentes de la app: un menu que contiene 2 expansion panel:
Y en otro lugar de la aplicacion, un componente que tambien tiene un expansion panel
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:
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?