Estoy tratando de sobrescribir el estilo del color de un componente secundario en el componente principal. Intenté hacer varias cosas, pero ninguna sobrescribía correctamente el estilo original del niño.
Cuando uso ::ng-deep para una sola clase, funciona
:host ::ng-deep class1 { color: black; }sin embargo, cuando uso ::ng-deep para clases anidadas:
:host ::ng-deep class1 .class2 .class3 { color: black; } // OR :host ::ng-deep class1 { class2 { class3 { color: black; } } }no sobrescribe el estilo original del niño. También intenté usar !important y funcionó, pero estoy tratando de evitar usar eso.
Elimine :host al frente o use :host en grandchild. Si queremos diseñar el elemento host del componente en sí, necesitamos el selector especial de pseudoclase :host. Sería mejor usar ::ng-deep como último recurso y recomendaría hacerlo en global style.css en su /src . Antes de usar :ng-deep intente mover su css a la hoja de estilo global y/o use !important . Si usa :ng-deep en algún componente secundario, también afectaría todo lo demás (que es posible que no vea al principio). También preste atención dónde y cuándo está agregando puntos. Te faltan algunas de las clases de css.
Para simplemente sobrescribir algunas cosas.
.class1 .class2 .class3 { color: black !important; }Esto no es válido en css normal (todavía), en scss podrías anidar selectores.
.class1 { .class2 { .class3 { color: black !important; } } }Último recurso.
::ng-deep .class1 .class2 .class3 { color: black; }No creo que ::ng-deep siga siendo una cosa, debería usar ViewEncapsulation.None en su componente en su lugar, para deshabilitar la encapsulación CSS:
import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'app-page', templateUrl: './page.component.html', styleUrls: ['./page.component.css'], encapsulation: ViewEncapsulation.None // <-- Add this here })