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 que parent y childson dos componentes separados, sus estilos son encerrados en su propio ámbito de aplicación.

En mi componente principal intenté hacer:

.parent .child {
  // Styles for child
}

Pero el .child estilos no se aplican a los childcomponentes.

Intenté usar styleUrlspara incluir la parenthoja de estilo de 's en el childcomponente 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 otra manera al buscar la childhoja de estilo parentpero tampoco ayudó.

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

Actualización: la forma más nueva

No lo hagas, si puedes evitarlo. Como Devon Sans señala en los comentarios: es muy probable que esta característica esté en desuso.

Actualización: nueva forma

Desde Angular 4.3.0 , todos los combinadores de piercing css quedaron en desuso. El equipo angular introdujo un nuevo combinador ::ng-deep (todavía está en el nivel experimental y no en la forma completa y final) como se muestra a continuación,

DEMO: 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>      
`

ACTUALIZACIÓN 3:

::ng-deeptambién está en desuso, lo que significa que ya no debes hacer esto. No está claro cómo esto afecta las cosas en las que necesita anular los estilos en los componentes secundarios de un componente primario. Para mí, parece extraño que esto se elimine por completo porque ¿cómo afectaría esto a las bibliotecas en las que necesita anular los estilos en un componente de biblioteca?

Comenta si tienes alguna idea sobre esto.

ACTUALIZACIÓN 2:

Desde entonces, /deep/todos los demás selectores de piercing de sombra ahora están en desuso. Angular descartado ::ng-deepque debe usarse en su lugar para una compatibilidad más amplia.

ACTUALIZAR:

Si usa Angular-CLI, debe usarlo en /deep/lugar de hacerlo >>>o no funcionará.

ORIGINAL:

Después de ir a la página de Github de Angular2 y hacer una búsqueda aleatoria de "estilo", encontré esta pregunta: Angular 2 - estilo innerHTML

Lo cual dice que use algo que se agregó 2.0.0-beta.10, los selectores >>>y ::shadow.

(>>>) (y el equivalente / deep /) y :: shadow se agregaron en 2.0.0-beta.10. Son similares a los combinadores CSS DOM de sombra (que están en desuso) y solo funcionan con encapsulación: ViewEncapsulation.Emulated, que es el valor predeterminado en Angular2. Probablemente también funcionen con ViewEncapsulation. Ninguno, pero luego solo se ignoran porque no son necesarios. Estos combinadores son solo una solución intermedia hasta que se admitan características más avanzadas para el diseño de componentes cruzados.

Entonces simplemente haciendo:

:host >>> .child {}

En parentel archivo de hoja de estilo de resuelto el problema. Tenga en cuenta que, como se indica en la cita anterior, esta solución es solo intermedia hasta que se admita un estilo de componentes cruzados más avanzado.

NO debe usar ::ng-deep, está en desuso. En Angular, la forma correcta de cambiar el estilo del componente infantil del padre 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 formato 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 solamente, agregue una clase CSS a la etiqueta superior de su componente y coloque su CSS "dentro" de esta etiqueta:

template:
    <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
}

Lamentablemente, parece que el selector / deep / está en desuso (al menos en Chrome) https://www.chromestatus.com/features/6750456638341120

En resumen, parece que (actualmente) no hay una solución a largo plazo que no sea lograr que su componente hijo estilice las cosas dinámicamente.

Puede pasar un objeto de estilo a su hijo y aplicarlo a través de:
<div [attr.style]="styleobject">

O si tiene un estilo específico, puede usar algo como:
<div [style.background-color]="colorvar">

Más discusión relacionada con esto: https://github.com/angular/angular/issues/6511

Tuve el mismo problema, así que si está usando angular2-cli con scss / sass use '/ deep /' en lugar de '>>>', el último selector aún no es compatible (pero funciona muy bien con css).

Si desea centrarse más en el componente secundario real de lo que debería, haga lo siguiente. De esta manera, si otros componentes secundarios comparten el mismo nombre de clase, no se verán afectados.

Plunker: https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p=preview

Por ejemplo:

import {Component, NgModule } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>I'm the host parent</h2>
      <child-component class="target1"></child-component><br/>
      <child-component class="target2"></child-component><br/>
      <child-component class="target3"></child-component><br/>
      <child-component class="target4"></child-component><br/>
      <child-component></child-component><br/>
    </div>
  `,
  styles: [`

  /deep/ child-component.target1 .child-box {
      color: red !important; 
      border: 10px solid red !important;
  }  

  /deep/ child-component.target2 .child-box {
      color: purple !important; 
      border: 10px solid purple !important;
  }  

  /deep/ child-component.target3 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this won't work because the target component is spelled incorrectly */
  /deep/ xxxxchild-component.target4 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this will affect any component that has a class name called .child-box */
  /deep/ .child-box {
      color: blue !important; 
      border: 10px solid blue !important;
  }  


  `]
})
export class App {
}

@Component({
  selector: 'child-component',
  template: `
    <div class="child-box">
      Child: This is some text in a box
    </div>
  `,
  styles: [`
    .child-box {
      color: green;    
      border: 1px solid green;
    }
  `]
})
export class ChildComponent {
}


@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, ChildComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

¡Espero que esto ayude!

codematrix

En realidad hay una opción más. Lo cual es bastante seguro. Puede usar ViewEncapsulation. Ninguno PERO coloca todos los estilos de sus componentes en su etiqueta (también conocido como selector). Pero de todos modos, siempre prefiero un estilo global más estilos encapsulados.

Aquí está el ejemplo modificado de Denis Rybalka:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'parent',
  styles: [`
    parent {
      .first {
        color:blue;
      }
      .second {
        color:red;
      }
    }
 `],
 template: `
    <div>
      <child class="first">First</child>
      <child class="second">Second</child>
    </div>`,
  encapsulation: ViewEncapsulation.None,
})
export class ParentComponent  {
  constructor() { }
}

Hay algunas opciones para lograr esto en Angular:

1) Puedes usar selectores css profundos

:host >>> .childrens {
     color: red;
 }

2) También puede cambiar la encapsulación de vista que está configurada como Emulada por defecto, pero puede cambiarse fácilmente a Nativo, que usa la implementación del navegador nativo de DOM DOM, en su caso solo necesita deshabilitarlo

Por ejemplo: `

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'parent',
  styles: [`
    .first {
      color:blue;
    }
    .second {
      color:red;
    }
 `],
 template: `
    <div>
      <child class="first">First</child>
      <child class="second">Second</child>
    </div>`,
  encapsulation: ViewEncapsulation.None,
 })
 export class ParentComponent  {
   constructor() {

   }
 }

No debe escribir reglas CSS para los elementos de un componente secundario en un componente primario, ya que un componente angular es una entidad autónoma que debe declarar explícitamente lo que está disponible para el mundo exterior. Si el diseño secundario cambia en el futuro, sus estilos para los elementos de ese componente secundario dispersos en los archivos SCSS de otros componentes podrían romperse fácilmente, haciendo que su estilo sea muy frágil. Eso es lo queViewEncapsulation es en el caso de CSS. De lo contrario, sería lo mismo si pudiera asignar valores a campos privados de alguna clase desde cualquier otra clase en Programación Orientada a Objetos.

Por lo tanto, lo que debe hacer es definir un conjunto de clases que podría aplicar al elemento host secundario e implementar cómo responde el niño a ellas.

Técnicamente, se podría hacer de la siguiente manera:

// child.component.html:
<span class="label-1"></span>

// child.component.scss:
:host.child-color-black {
    .label-1 {
        color: black;
    }
}

:host.child-color-blue {
    .label-1 {
        color: blue ;
    }
}

// parent.component.html:
<child class="child-color-black"></child>
<child class="child-color-blue"></child>

En otras palabras, utiliza el :hostpseudo-selector proporcionado por Angular + conjunto de clases CSS para definir posibles estilos secundarios en el componente secundario en sí. Luego tiene la capacidad de activar esos estilos desde el exterior aplicando clases predefinidas al <child>elemento host.

Me parece mucho más limpio pasar una variable @INPUT si tiene acceso al código del componente secundario:

La idea es que el padre le dice al niño cuál debería ser su estado de apariencia, y el niño decide cómo mostrar el estado. Es una bonita arquitectura

Manera SCSS:

.active {
  ::ng-deep md-list-item {
    background-color: #eee;
  }
}

Mejor manera: - usar selectedvariable:

<md-list>
    <a
            *ngFor="let convo of conversations"
            routerLink="/conversations/{{convo.id}}/messages"
            #rla="routerLinkActive"
            routerLinkActive="active">
        <app-conversation
                [selected]="rla.isActive"
                [convo]="convo"></app-conversation>
    </a>
</md-list>

A partir de hoy (Angular 9), Angular utiliza un DOM DOM para mostrar los componentes como elementos HTML personalizados . Una forma elegante de diseñar esos elementos personalizados podría ser usar variables CSS personalizadas . Aquí hay un ejemplo genérico:

class ChildElement extends HTMLElement {
  constructor() {
    super();
    
    var shadow = this.attachShadow({mode: 'open'});
    var wrapper = document.createElement('div');
    wrapper.setAttribute('class', 'wrapper');
    
    // Create some CSS to apply to the shadow dom
    var style = document.createElement('style');
    
    style.textContent = `
    
      /* Here we define the default value for the variable --background-clr */
      :host {
        --background-clr: green;
      }
      
      .wrapper {
        width: 100px;
        height: 100px;
        background-color: var(--background-clr);
        border: 1px solid red;
      }
    `;
    
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}

// Define the new element
customElements.define('child-element', ChildElement);

/* CSS CODE */

/* This element is referred as :host from the point of view of the custom element. Commenting out this CSS will result in the background to be green, as defined in the custom element */

child-element {
  --background-clr: yellow; 
}

<div>
  <child-element></child-element>
</div>

Como podemos ver en el código anterior, creamos un elemento personalizado, tal como lo haría Angular para nosotros con cada componente, y luego anulamos la variable responsable del color de fondo dentro de la raíz sombra del elemento personalizado, desde el alcance global .

En una aplicación Angular, esto podría ser algo como:

parent.component.scss

child-element {
  --background-clr: yellow;
}

child-element.component.scss

:host {
  --background-clr: green;
}

.wrapper {
  width: 100px;
  height: 100px;
  background-color: var(--background-clr);
  border: 1px solid red;
}

La respuesta rápida es que no deberías estar haciendo esto, en absoluto. Rompe la encapsulación de componentes y socava el beneficio que obtienes de los componentes autónomos. Considere pasar una bandera de apoyo al componente hijo, entonces puede decidir por sí mismo cómo renderizar de manera diferente o aplicar CSS diferente, si es necesario.

<parent>
  <child [foo]="bar"></child>
</parent>

Angular está despreciando todas las formas de afectar los estilos infantiles de los padres.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

También tuve este problema y no quería usar una solución obsoleta, así que terminé con:

en padres

 <dynamic-table
  ContainerCustomStyle='width: 400px;'
  >
 </dynamic-Table>

componente hijo

@Input() ContainerCustomStyle: string;

en niño en html div

 <div class="container mat-elevation-z8"
 [style]='GetStyle(ContainerCustomStyle)' >

y en código

constructor(private sanitizer: DomSanitizer) {  }

  GetStyle(c) {
    if (isNullOrUndefined(c)) { return null; }
    return  this.sanitizer.bypassSecurityTrustStyle(c);
  }

funciona como se esperaba y no debe ser desaprobado;)

A medida que Internet se actualiza, he encontrado una solución.

Primero algunas advertencias.

1. Aún no lo hagas. Para aclarar, no planearía componentes secundarios que le permitan diseñarlos. SOC. Si usted, como diseñador de componentes, desea permitir esto, tendrá aún más poder.
2. Si su hijo no vive en la sombra, entonces esto no funcionará para usted.
3. Si tiene que admitir un navegador que no puede tener una sombra dom, entonces esto tampoco funcionará para usted.

Primero, marque la encapsulación de su componente hijo como sombra para que se represente en el dom de sombra real. En segundo lugar, agregue el atributo de la parte al elemento que desea permitir que el padre aplique. En la hoja de estilo de componentes de sus padres, puede usar el método :: part () para acceder

Propongo un ejemplo para hacerlo más claro, ya que angular.io/guide/component-styles dice:

El combinador descendente que atraviesa las sombras está en desuso y el soporte se está eliminando de los principales navegadores y herramientas. Como tal, planeamos eliminar el soporte en Angular (para los 3 de / deep /, >>> y :: ng-deep). Hasta entonces :: ng-deep debería preferirse para una compatibilidad más amplia con las herramientas.

Encendido app.component.scss, importe su *.scsssi es necesario. _colors.scsstiene algunos valores de color comunes:

$button_ripple_red: #A41E34;
$button_ripple_white_text: #FFF;

Aplicar una regla a todos los componentes

Se diseñarán todos los botones que tengan btn-redclase.

@import `./theme/sass/_colors`;

// red background and white text
:host /deep/ button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

Aplicar una regla a un solo componente

Se diseñarán todos los botones que tengan btn-redclase en el app-logincomponente.

@import `./theme/sass/_colors`;

/deep/ app-login button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

Lo he resuelto fuera de Angular. He definido un scss compartido que estoy importando a mis hijos.

shared.scss

%cell {
  color: #333333;
  background: #eee;
  font-size: 13px;
  font-weight: 600;
}

child.scss

@import 'styles.scss';
.cell {
  @extend %cell;
}

Mi enfoque propuesto es una forma de resolver el problema que el OP ha preguntado. Como se mencionó en varias ocasiones, :: ng-deep,: ng-host se depreciará y, en mi opinión, deshabilitar la encapsulación es una pérdida de código.