Mam element nadrzędny:

<parent></parent>

I chcę zapełnić tę grupę komponentami potomnymi:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

Szablon nadrzędny:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

Szablon podrzędny:

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

Ponieważ parenti childsą to dwa osobne komponenty, ich style są zablokowane we własnym zakresie.

W moim komponencie nadrzędnym próbowałem:

.parent .child {
  // Styles for child
}

Ale .childstyle nie są stosowane do childkomponentów.

Próbowałem styleUrlsdołączyć parentarkusz stylów do childkomponentu, aby rozwiązać problem z zakresem:

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

Ale to nie pomogło, próbowałem też w inny sposób, pobierając childarkusz stylów do, parentale to też nie pomogło.

Jak więc stylizować komponenty potomne zawarte w komponencie macierzystym?

Aktualizacja - najnowszy sposób

Nie rób tego, jeśli możesz tego uniknąć. Jak zauważa Devon Sans w komentarzach: Ta funkcja najprawdopodobniej będzie przestarzała.

Aktualizacja - nowsza droga

Od Angulara 4.3.0 wszystkie przebijające kombinatory css były przestarzałe. Zespół Angular wprowadził nowy kombinator ::ng-deep (wciąż jest na poziomie eksperymentalnym, a nie na pełnej i końcowej drodze), jak pokazano poniżej,

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

Stara droga

Możesz użyć encapsulation modei / lubpiercing CSS combinators >>>, /deep/ and ::shadow

przykład roboczy: 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>      
`

AKTUALIZACJA 3:

::ng-deepjest również przestarzałe, co oznacza, że ​​nie powinieneś już tego robić. Nie jest jasne, w jaki sposób wpływa to na rzeczy, w których należy zastąpić style w komponentach podrzędnych z komponentu nadrzędnego. Wydaje mi się dziwne, jeśli zostanie to całkowicie usunięte, ponieważ jak wpłynęłoby to na biblioteki, w których należy przesłonić style w komponencie biblioteki?

Skomentuj, jeśli masz wgląd w to.

AKTUALIZACJA 2:

Ponieważ /deep/wszystkie pozostałe selektory przebijające cień są teraz przestarzałe. Spadek kątowy, ::ng-deepktóry należy zastosować zamiast tego dla większej kompatybilności.

AKTUALIZACJA:

Jeśli używasz Angular-CLI, musisz użyć /deep/zamiast tego, >>>bo inaczej nie będzie działać.

ORYGINALNY:

Po przejściu na stronę Github w Angular2 i przeprowadzeniu losowego wyszukiwania „stylu” znalazłem to pytanie: Angular 2 - stylizacja innerHTML

Który powiedział, aby użyć czegoś, co zostało dodane 2.0.0-beta.10, selektorów >>>i ::shadow.

(>>>) (i odpowiednik / deep /) i :: shadow zostały dodane w wersji 2.0.0-beta.10. Są one podobne do cienia DOM CSS (które są przestarzałe) i działają tylko z enkapsulacją: ViewEncapsulation.Emulated, która jest domyślna w Angular2. Prawdopodobnie działają również z ViewEncapsulation.None, ale są wtedy ignorowane, ponieważ nie są konieczne. Te kombinatory są jedynie rozwiązaniem pośrednim, dopóki nie są obsługiwane bardziej zaawansowane funkcje stylizacji między komponentami.

Po prostu robienie:

:host >>> .child {}

W parent„s pliku arkusza stylów rozwiązać ten problem. Należy pamiętać, jak stwierdzono w powyższym cytacie, to rozwiązanie jest tylko pośrednie, dopóki nie będzie obsługiwana bardziej zaawansowana stylizacja między komponentami.

NIE powinieneś używać ::ng-deep, jest przestarzałe. W Angular właściwym sposobem zmiany stylu komponentu dziecięcego od rodzica jest użycie encapsulation(przeczytaj poniższe ostrzeżenie, aby zrozumieć konsekwencje):

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

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

I wtedy będziesz mógł modyfikować css ze swojego komponentu bez potrzeby :: :: -g-deep

.mat-sort-header-container {
  display:flex;
  justify-content:center;
}

OSTRZEŻENIE: Wykonanie tej czynności sprawi, że wszystkie reguły css, które napiszesz dla tego komponentu, będą globalne.

Aby ograniczyć zakres twojego css tylko do tego komponentu, dodaj klasę css do górnego tagu twojego komponentu i umieść css „wewnątrz” tego tagu:

template:
    <div class='my-component'>
      <child-component class="first">First</child>
    </div>,

Plik scss:

.my-component {
  // All your css goes in there in order not to be global
}

Niestety wygląda na to, że selektor / deep / jest przestarzały (przynajmniej w Chrome) https://www.chromestatus.com/features/6750456638341120

Krótko mówiąc, wydaje się, że nie ma (obecnie) długoterminowego rozwiązania innego niż jakoś sprawić, by element podrzędny stylizował rzeczy dynamicznie.

Możesz przekazać dziecku obiekt stylu i zastosować go przez:
<div [attr.style]="styleobject">

Lub jeśli masz określony styl, możesz użyć czegoś takiego:
<div [style.background-color]="colorvar">

Więcej dyskusji na ten temat: https://github.com/angular/angular/issues/6511

Miał ten sam problem, więc jeśli używasz angular2-cli ze scss / sass użyj '/ deep /' zamiast '>>>', ostatni selektor nie jest jeszcze obsługiwany (ale działa świetnie z css).

Jeśli chcesz być bardziej ukierunkowany na rzeczywisty komponent potomny, wykonaj następujące czynności. W ten sposób, jeśli inne komponenty potomne będą miały tę samą nazwę klasy, nie będzie to miało wpływu.

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

Na przykład:

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 {}

Mam nadzieję że to pomoże!

kodematrix

W rzeczywistości jest jeszcze jedna opcja. Co jest raczej bezpieczne. Możesz użyć ViewEncapsulation.Nie ALE wstawić wszystkie style komponentów do jego znacznika (czyli selektora). Ale i tak zawsze preferuję styl globalny plus style zamknięte.

Oto zmodyfikowany przykład Denisa Rybalki:

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() { }
}

Istnieje kilka opcji osiągnięcia tego w Angular:

1) Możesz używać głębokich selektorów css

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

2) Możesz również zmienić enkapsulację widoku, która jest domyślnie ustawiona na Emulowane, ale można ją łatwo zmienić na Natywny, który korzysta z implementacji natywnej przeglądarki Shadow DOM, w twoim przypadku wystarczy go wyłączyć

Na przykład: `

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() {

   }
 }

Nie powinieneś pisać reguł CSS dla elementów podrzędnych w komponencie nadrzędnym, ponieważ komponent Angular jest samodzielną jednostką, która powinna jawnie deklarować, co jest dostępne dla świata zewnętrznego. Jeśli układ potomny zmieni się w przyszłości, twoje style dla tych elementów potomnych rozproszonych w plikach SCSS innych składników mogą łatwo ulec uszkodzeniu, przez co twoja stylizacja będzie bardzo delikatna. Po to ViewEncapsulationjest w przypadku CSS. W przeciwnym razie byłoby tak samo, gdybyś mógł przypisać wartości do pól prywatnych jakiejś klasy z dowolnej innej klasy w programowaniu obiektowym.

Dlatego należy zdefiniować zestaw klas, które można zastosować do podrzędnego elementu hosta i zaimplementować sposób, w jaki dziecko na nie reaguje.

Technicznie można to zrobić w następujący sposób:

// 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>

Innymi słowy, używasz :hostpseudoselektora dostarczonego przez Angular + zestaw klas CSS, aby zdefiniować możliwe style potomne w samym komponencie potomnym. Następnie możesz uruchomić te style z zewnątrz, stosując wstępnie zdefiniowane klasy do <child>elementu hosta.

Uważam, że o wiele czystsze jest przekazywanie zmiennej @INPUT, jeśli masz dostęp do kodu komponentu potomnego:

Chodzi o to, że rodzic mówi dziecku, jaki powinien być jego wygląd, a dziecko decyduje, jak wyświetlić ten stan. To ładna architektura

Sposób SCSS:

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

Lepszy sposób: - użyj selectedzmiennej:

<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>

Na dzień dzisiejszy (Angular 9) Angular używa Shadow DOM do wyświetlania komponentów jako niestandardowych elementów HTML . Jednym ze eleganckich sposobów stylizowania tych niestandardowych elementów może być użycie niestandardowych zmiennych CSS . Oto ogólny przykład:

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>

Jak widać z powyższego kodu, tworzymy element niestandardowy, tak jak zrobiłby to Angular z każdym komponentem, a następnie zastępujemy zmienną odpowiedzialną za kolor tła w katalogu głównym cienia elementu niestandardowego, z zakresu globalnego .

W aplikacji Angular może to być coś takiego:

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;
}

Szybka odpowiedź brzmi: w ogóle nie powinieneś tego robić. Łamie enkapsulację komponentów i podważa korzyści uzyskiwane z samodzielnych komponentów. Zastanów się nad przekazaniem flagi prop do komponentu potomnego, a następnie może sam zdecydować, jak renderować inaczej lub zastosować inny CSS, jeśli to konieczne.

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

Angular odrzuca wszelkie sposoby wpływania na styl dziecka przez rodziców.

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

Miałem również ten problem i nie chciałem używać przestarzałego rozwiązania, więc otrzymałem:

równolegle

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

składnik potomny

@Input() ContainerCustomStyle: string;

u dziecka w html div

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

i w kodzie

constructor(private sanitizer: DomSanitizer) {  }

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

działa zgodnie z oczekiwaniami i nie powinien być przestarzały;)

W miarę aktualizacji Internetu natknąłem się na rozwiązanie.

Najpierw pewne zastrzeżenia.

1. Nadal tego nie rób. Aby to wyjaśnić, nie planowałbym komponentów potomnych pozwalających na ich stylizację. SOC. Jeśli jako projektant komponentów chcesz na to pozwolić, tym więcej mocy dla Ciebie.
2. Jeśli twoje dziecko nie mieszka w cienistym domu, to nie zadziała dla ciebie.
3. Jeśli musisz obsługiwać przeglądarkę, która nie może mieć cienia, to również to nie zadziała.

Najpierw zaznacz enkapsulację komponentu podrzędnego jako cień, aby renderowała się w rzeczywistym cieniu. Po drugie, dodaj atrybut części do elementu, który chcesz nadać stylowi nadrzędnemu. W arkuszu stylów komponentów rodzica możesz użyć metody :: part (), aby uzyskać dostęp

Proponuję przykład, aby to wyjaśnić, ponieważ angular.io/guide/component-styles stwierdza:

Kombinator przebijający cienie jest przestarzały, a wsparcie jest usuwane z głównych przeglądarek i narzędzi. W związku z tym planujemy porzucić wsparcie w Angular (dla wszystkich 3 / deep /, >>> i :: ng-deep). Do tego czasu należy preferować :: ng-deep, aby uzyskać szerszą kompatybilność z narzędziami.

Włącz app.component.scss, w *.scssrazie potrzeby zaimportuj . _colors.scssma kilka wspólnych wartości kolorów:

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

Zastosuj regułę do wszystkich komponentów

Wszystkie przyciski mające btn-redklasę będą stylizowane.

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

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

Zastosuj regułę do pojedynczego komponentu

Wszystkie przyciski mające btn-redklasę na app-loginkomponencie będą stylizowane.

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

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

Rozwiązałem to poza Angularem. Zdefiniowałem wspólny scss, który importuję do moich dzieci.

shared.scss

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

child.scss

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

Moje zaproponowane podejście jest sposobem rozwiązania problemu, o który pytał PO. Jak wspomniano przy wielu okazjach, :: ng-deep,: ng-host ulegnie deprecjacji, a wyłączenie enkapsulacji to po prostu zbyt duży wyciek kodu, moim zdaniem.