Tengo un componente padre:

<parent></parent>

Y quiero llenar 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 hijo:

<div class="child">Test</div>

Ya queparent ychild son dos componentes separados, sus estilos están bloqueados a su propio alcance.

En mi componente principal intenté hacer:

.parent .child {
  // Styles for child
}

Pero el.child los estilos no se aplican alchild componentes.

Traté de usarstyleUrls para incluir elparenthoja de estilo enchild componente para resolver el problema del alcance:

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

Pero eso no ayudó, también lo intentó de la otra manera al buscar elchild hoja de estilo enparent pero eso tampoco ayudó.

Entonces, ¿cómo diseña los componentes secundarios que se incluyen en un componente principal?