Recuerda que en la informática un problema suele tener diferentes resoluciones, por lo tanto nosotros aquí te compartimos lo más óptimo y mejor.
Solución:
Normalmente /deep/ “shadow-piercing” El combinador se puede usar para forzar un estilo a child components. Este selector tenía un alias >>> y ahora tiene otro llamado ::ng-deep.
ya que /deep/ combinator ha quedado en desuso, se recomienda utilizar ::ng-deep
Por ejemplo:
y css
.overview
::ng-deep
p
&:last-child
margin-bottom: 0;
se aplicará a los componentes secundarios
USO
::ng-deep, >>> y /deep/ deshabilite la encapsulación de vista para reglas CSS específicas, en otras palabras, le da acceso a elementos DOM, que no están en el HTML de su componente. Por ejemplo, si usa Angular Material (o cualquier otra biblioteca de terceros como esta), algunos elementos generados están fuera del área de su componente (como diálogo) y no puede acceder a esos elementos directamente o usando una forma CSS normal. Si desea cambiar los estilos de esos elementos, puede usar una de esas tres cosas, por ejemplo:
::ng-deep .mat-dialog
/* styles here */
Por ahora, el equipo de Angular recomienda hacer “profundo” Manipulaciones solo con EMULADO ver encapsulación.
DEPRECACIÓN
“profundo” Las manipulaciones son en realidad obsoleto también, PERO todavía funciona por ahora, porque Angular admite preprocesamiento (no se apresure a rechazar ::ng-deep hoy echa un vistazo a prácticas de desaprobación primero).
De todos modos, antes de seguir por este camino, te recomiendo que eches un vistazo a deshabilitar la encapsulación de vista enfoque (que tampoco es ideal, permite que sus estilos se filtren en otros componentes), pero en algunos casos, es una mejor manera. Si decidió deshabilitar la encapsulación de vista, se recomienda enfáticamente usar clases específicas para evitar la intersección de las reglas CSS y, finalmente, evitar un desorden en sus hojas de estilo. Es realmente fácil deshabilitar directamente en el componente .ts expediente:
@Component(
selector: '',
template: '',
styles: [''],
encapsulation: ViewEncapsulation.None // Use to disable CSS Encapsulation for this component
)
Puede encontrar más información sobre la encapsulación de vistas en este artículo.
Destacaría la importancia de limitar la ::ng-deep solo a los hijos de un componente al requerir que el padre sea una clase css encapsulada.
Para que esto funcione, es importante usar el ::ng-deep después del padre, no antes, de lo contrario se aplicaría a todas las clases con el mismo nombre en el momento en que se carga el componente.
Utilizando el :host palabra clave antes ::ng-deep manejará esto automáticamente:
:host ::ng-deep .mat-checkbox-layout
Alternativamente, puede lograr el mismo comportamiento agregando una clase CSS con ámbito de componente antes del ::ng-deep palabra clave:
.my-component ::ng-deep .mat-checkbox-layout
background-color: aqua;
Plantilla de componente:
El css resultante (generado por Angular) incluirá el nombre generado de forma única y se aplicará solo a su propia instancia de componente:
.my-component[_ngcontent-c1] .mat-checkbox-layout
background-color: aqua;