Saya punya komponen induk:

<parent></parent>

Dan saya ingin mengisi grup ini dengan komponen anak:

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

Templat induk:

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

Template anak:

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

Karena parentdan childdua komponen yang terpisah, gaya mereka dikunci ke ruang lingkup mereka sendiri.

Pada komponen induk saya, saya mencoba melakukan:

.parent .child {
  // Styles for child
}

Tetapi .childgaya tidak diterapkan pada childkomponen.

Saya mencoba menggunakan styleUrlsuntuk memasukkan parentstylesheet ke dalam childkomponen untuk menyelesaikan masalah lingkup:

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

Tapi itu tidak membantu, juga mencoba cara lain dengan mengambil childstylesheet, parenttetapi itu juga tidak membantu.

Jadi bagaimana Anda mengatur komponen anak yang dimasukkan ke dalam komponen induk?

Perbarui - Cara Terbaru

Jangan lakukan itu, jika Anda bisa menghindarinya. Seperti yang ditunjukkan Devon Sans dalam komentar: Fitur ini kemungkinan besar akan ditinggalkan.

Perbarui - Cara Baru

Dari Angular 4.3.0 , semua kombinator penindik css sudah usang. Tim sudut memperkenalkan combinator baru ::ng-deep (masih di level eksperimental dan bukan cara penuh dan final) seperti yang ditunjukkan di bawah ini,

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

Cara lama

Anda dapat menggunakan encapsulation modedan / ataupiercing CSS combinators >>>, /deep/ and ::shadow

contoh kerja: 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>      
`

PEMBARUAN 3:

::ng-deepjuga sudah usang yang berarti Anda tidak boleh melakukan ini sama sekali lagi. Tidak jelas bagaimana hal ini memengaruhi hal-hal di mana Anda perlu mengganti gaya pada komponen anak dari komponen induk. Bagi saya rasanya aneh jika ini dihapus sepenuhnya karena bagaimana hal ini akan memengaruhi hal-hal sebagai pustaka di mana Anda perlu mengganti gaya dalam komponen pustaka?

Beri komentar jika Anda memiliki wawasan tentang hal ini.

PEMBARUAN 2:

Karena /deep/dan semua penyeleksi penusuk bayangan lainnya sekarang sudah usang. Penurunan sudut ::ng-deepyang harus digunakan sebagai gantinya untuk kompatibilitas yang lebih luas.

MEMPERBARUI:

Jika menggunakan Angular-CLI, Anda harus menggunakan /deep/alih-alih >>>jika tidak, itu tidak akan berfungsi.

ASLI:

Setelah membuka halaman Github Angular2 dan melakukan pencarian acak untuk "style", saya menemukan pertanyaan ini: Angular 2 - styleHTML styling

Yang dikatakan menggunakan sesuatu yang ditambahkan 2.0.0-beta.10, >>>dan ::shadowpenyeleksi.

(>>>) (dan yang setara / dalam /) dan :: shadow ditambahkan dalam 2.0.0-beta.10. Mereka mirip dengan penggabung bayangan DOM CSS (yang sudah usang) dan hanya berfungsi dengan enkapsulasi: ViewEncapsulation.Emulated yang merupakan default di Angular2. Mereka mungkin juga bekerja dengan ViewEncapsulation. Tidak ada tetapi kemudian hanya diabaikan karena mereka tidak perlu. Combinator ini hanya solusi perantara sampai fitur yang lebih canggih untuk penataan komponen-silang didukung.

Jadi cukup lakukan:

:host >>> .child {}

Dalam parent's berkas stylesheet memecahkan masalah. Harap dicatat, seperti yang dinyatakan dalam kutipan di atas, solusi ini hanya bersifat sementara hingga penataan komponen silang yang lebih maju didukung.

Anda TIDAK boleh menggunakan ::ng-deep, itu sudah usang. Di Angular, cara yang tepat untuk mengubah gaya komponen anak-anak dari orang tua adalah dengan menggunakan encapsulation(baca peringatan di bawah ini untuk memahami implikasinya):

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

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

Dan kemudian, Anda akan dapat memodifikasi bentuk css komponen Anda tanpa perlu dari :: ng-deep

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

PERINGATAN: Melakukan ini akan membuat semua aturan css yang Anda tulis untuk komponen ini menjadi global.

Untuk membatasi ruang lingkup css Anda hanya untuk komponen ini, tambahkan kelas css ke tag atas komponen Anda dan letakkan css Anda "di dalam" tag ini:

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

File scss:

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

Sayangnya tampaknya / deep / selector sudah usang (setidaknya di Chrome) https://www.chromestatus.com/features/6750456638341120

Singkatnya tampaknya ada (saat ini) tidak ada solusi jangka panjang selain untuk entah bagaimana membuat komponen anak Anda untuk gaya hal-hal secara dinamis.

Anda dapat mengirimkan objek gaya ke anak Anda dan menerapkannya melalui:
<div [attr.style]="styleobject">

Atau jika Anda memiliki gaya tertentu, Anda dapat menggunakan sesuatu seperti:
<div [style.background-color]="colorvar">

Diskusi lebih lanjut terkait dengan ini: https://github.com/angular/angular/issues/6511

Punya masalah yang sama, jadi jika Anda menggunakan angular2-cli dengan scss / sass gunakan '/ deep /' bukan '>>>', pemilih terakhir belum didukung (tetapi berfungsi baik dengan css).

Jika Anda ingin lebih ditargetkan ke komponen anak yang sebenarnya daripada yang harus Anda lakukan ikuti. Dengan cara ini, jika komponen anak lainnya berbagi nama kelas yang sama, mereka tidak akan terpengaruh.

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

Sebagai contoh:

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

Semoga ini membantu!

codematrix

Sebenarnya ada satu opsi lagi. Yang agak aman. Anda dapat menggunakan ViewEncapsulation.None TAPI TETAPI menempatkan semua gaya komponen Anda ke dalam tag-nya (alias pemilih). Tapi bagaimanapun juga selalu lebih suka beberapa gaya global plus gaya enkapsulasi.

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

Ada beberapa opsi untuk mencapai ini di Angular:

1) Anda dapat menggunakan penyeleksi css dalam

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

2) Anda juga dapat mengubah tampilan enkapsulasi yang disetel ke Emulated sebagai default tetapi dapat dengan mudah diubah menjadi Native yang menggunakan implementasi browser asli Shadow DOM, jika Anda hanya perlu menonaktifkannya

Misalnya: `

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

   }
 }

Anda tidak boleh menulis aturan CSS untuk elemen komponen anak di komponen induk, karena komponen Angular adalah entitas mandiri yang harus secara eksplisit menyatakan apa yang tersedia untuk dunia luar. Jika tata letak anak berubah di masa mendatang, gaya Anda untuk elemen komponen anak yang tersebar di file SCSS komponen lain dapat dengan mudah dipecah, sehingga membuat gaya Anda sangat rapuh. Itu untuk apa ViewEncapsulationdalam kasus CSS. Jika tidak, akan sama jika Anda bisa menetapkan nilai ke bidang pribadi beberapa kelas dari kelas lain di Pemrograman Berorientasi Objek.

Oleh karena itu, apa yang harus Anda lakukan adalah mendefinisikan sekumpulan kelas yang dapat Anda terapkan pada elemen host anak dan mengimplementasikan bagaimana anak meresponsnya.

Secara teknis, itu bisa dilakukan sebagai berikut:

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

Dengan kata lain, Anda menggunakan :hostpseudo-selector yang disediakan oleh Angular + set kelas CSS untuk menentukan kemungkinan style anak dalam komponen child itu sendiri. Anda kemudian memiliki kemampuan untuk memicu gaya-gaya tersebut dari luar dengan menerapkan kelas yang telah ditentukan sebelumnya ke <child>elemen host.

Saya merasa jauh lebih bersih untuk melewatkan variabel @INPUT jika Anda memiliki akses ke kode komponen :

Idenya adalah bahwa orang tua memberi tahu anak itu seperti apa penampilannya, dan anak itu memutuskan bagaimana menampilkan keadaan itu. Ini arsitektur yang bagus

Cara SCSS:

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

Cara yang lebih baik: - gunakan selectedvariabel:

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

Pada hari ini (Angular 9), Angular menggunakan Shadow DOM untuk menampilkan komponen sebagai elemen HTML khusus . Salah satu cara elegan untuk menata elemen khusus tersebut mungkin menggunakan variabel CSS khusus . Ini adalah contoh umum:

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>

Seperti yang dapat kita lihat dari kode di atas, kita membuat elemen kustom, seperti yang akan dilakukan Angular untuk kita dengan setiap komponen, dan kemudian kita menimpa variabel yang bertanggung jawab atas warna latar belakang dalam akar bayangan elemen kustom, dari lingkup global .

Di aplikasi Angular, ini mungkin seperti:

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

Jawaban singkatnya adalah Anda seharusnya tidak melakukan ini sama sekali. Ini merusak enkapsulasi komponen dan merusak manfaat yang Anda dapatkan dari komponen mandiri. Pertimbangkan untuk mengirimkan flag prop ke komponen child, ia kemudian dapat memutuskan sendiri bagaimana me-render secara berbeda atau menerapkan CSS yang berbeda, jika perlu.

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

Angular mencela semua cara untuk mempengaruhi gaya anak dari orang tua.

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

Saya juga memiliki masalah ini dan tidak ingin menggunakan solusi usang sehingga saya akhirnya dengan:

di parrent

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

komponen anak

@Input() ContainerCustomStyle: string;

pada anak di html div

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

dan dalam kode

constructor(private sanitizer: DomSanitizer) {  }

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

bekerja seperti yang diharapkan dan tidak boleh ditinggalkan;)

Sebagai pembaruan internet saya menemukan solusi.

Pertama, beberapa peringatan.

1. Masih tidak melakukannya. Untuk memperjelas, saya tidak akan merencanakan komponen anak yang memungkinkan Anda untuk membuatnya. SOC. Jika Anda sebagai perancang komponen ingin memperbolehkan ini, maka semua kekuatan lebih untuk Anda.
2. Jika anak Anda tidak tinggal di tempat bayangan maka ini tidak akan berhasil untuk Anda.
3. Jika Anda harus mendukung browser yang tidak dapat memiliki dom bayangan maka ini juga tidak akan berfungsi untuk Anda.

Pertama, tandai enkapsulasi komponen anak Anda sebagai bayangan sehingga ditampilkan dalam dom bayangan sebenarnya. Kedua, tambahkan atribut bagian ke elemen yang ingin Anda biarkan orang tua untuk gaya. Dalam stylesheet komponen orang tua Anda, Anda dapat menggunakan metode :: part () untuk mengakses

Saya mengusulkan contoh untuk membuatnya lebih jelas, karena angular.io/guide/component-styles menyatakan:

Combinator keturunan shadow-piercing sudah usang dan dukungan sedang dihapus dari browser dan alat utama. Karena itu kami berencana untuk menjatuhkan dukungan di Angular (untuk semua 3 dari / deep /, >>> dan :: ng-deep). Sampai saat itu :: ng-deep harus dipilih untuk kompatibilitas yang lebih luas dengan alat-alat.

Aktif app.component.scss, impor Anda *.scssjika perlu. _colors.scssmemiliki beberapa nilai warna umum:

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

Terapkan aturan ke semua komponen

Semua tombol yang memiliki btn-redkelas akan ditata.

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

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

Terapkan aturan ke satu komponen

Semua tombol yang memiliki btn-redkelas pada app-loginkomponen akan ditata.

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

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

Saya telah menyelesaikannya di luar Angular. Saya telah menetapkan scss bersama yang saya impor ke anak-anak saya.

shared.scss

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

child.scss

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

Pendekatan yang saya usulkan adalah cara bagaimana menyelesaikan masalah yang ditanyakan OP. Seperti yang disebutkan pada beberapa kesempatan, :: ng-deep,: ng-host akan terdepresiasi dan menonaktifkan enkapsulasi adalah terlalu banyak kebocoran kode, dalam pandangan saya.