¿Cómo diseñar componentes secundarios a partir del archivo CSS del componente principal?
Tengo un componente principal:
<parent></parent>
Y quiero completar este grupo con componentes secundarios:
<parent>
<child></child>
<child></child>
<child></child>
</parent>
Plantilla principal:
<div class="parent">
<!-- Children goes here -->
<ng-content></ng-content>
</div>
Plantilla infantil:
<div class="child">Test</div>
Dado que parenty childson dos componentes separados, sus estilos están limitados a su propio alcance.
En mi componente principal intenté hacer:
.parent .child {
// Styles for child
}
Pero los .childestilos no se aplican a los childcomponentes.
Intenté styleUrlsincluir la parenthoja de estilo en childel componente para resolver el problema del alcance:
// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]
Pero eso no ayudó, también intenté al revés al buscar la childhoja de estilo parent, pero tampoco ayudó.
Entonces, ¿cómo se diseñan los componentes secundarios que se incluyen en un componente principal?
Actualización: forma más nueva
No lo hagas, si puedes evitarlo. Como señala Devon Sans en los comentarios: lo más probable es que esta característica quede obsoleta.
Última actualización
Desde Angular 4.3.0 hasta ahora (Angular 12.x), todos los combinadores CSS penetrantes quedaron obsoletos. El equipo de Angular introdujo un nuevo combinador ::ng-deepcomo se muestra a continuación,
DEMOSTRACIÓN: https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview
styles: [
`
:host { color: red; }
:host ::ng-deep parent {
color:blue;
}
:host ::ng-deep child{
color:orange;
}
:host ::ng-deep child.class1 {
color:yellow;
}
:host ::ng-deep child.class2{
color:pink;
}
`
],
template: `
Angular2 //red
<parent> //blue
<child></child> //orange
<child class="class1"></child> //yellow
<child class="class2"></child> //pink
</parent>
`
Vieja forma
Puedes usar encapsulation modey/opiercing CSS combinators >>>, /deep/ and ::shadow
ejemplo de trabajo: http://plnkr.co/edit/1RBDGQ?p=preview
styles: [
`
:host { color: red; }
:host >>> parent {
color:blue;
}
:host >>> child{
color:orange;
}
:host >>> child.class1 {
color:yellow;
}
:host >>> child.class2{
color:pink;
}
`
],
template: `
Angular2 //red
<parent> //blue
<child></child> //orange
<child class="class1"></child> //yellow
<child class="class2"></child> //pink
</parent>
`
NO deberías utilizar ::ng-deep, está en desuso. En Angular, la forma correcta de cambiar el estilo del componente secundario del principal es usar encapsulation(lea la advertencia a continuación para comprender las implicaciones):
import { ViewEncapsulation } from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
})
Y luego, podrá modificar el CSS de su componente sin necesidad de ::ng-deep
.mat-sort-header-container {
display: flex;
justify-content: center;
}
ADVERTENCIA: Al hacer esto, todas las reglas CSS que escriba para este componente serán globales.
Para limitar el alcance de su CSS a este componente y a su hijo únicamente, agregue una clase CSS a la etiqueta superior de su componente y coloque su CSS "dentro" de esta etiqueta:
plantilla:
<div class='my-component'>
<child-component class="first">First</child>
</div>,
Archivo scss:
.my-component {
// All your css goes in there in order not to be global
}
