Bagaimana cara mendesain komponen anak dari file CSS komponen induk?


266

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?



Lihat jawaban saya yang sepenuhnya paradigma-ramah, bebas trik .
Alexander Abakumov

Jawaban:


242

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

3
Kombinator CSS yang menusuk sudah tidak digunakan lagi di Chrome
Robin-Hoodie

22
Tim sudut berencana untuk menjatuhkan dukungan :: ng-deep juga. Dari dokumen mereka: "Combinator keturunan shadow-piercing sudah usang dan dukungan sedang dihapus dari browser dan alat utama. Dengan demikian kami berencana untuk menjatuhkan dukungan di Angular (untuk semua 3 dari / deep /, >>> dan :: ng- deep). Sampai saat itu :: ng-deep harus lebih disukai untuk kompatibilitas yang lebih luas dengan alat-alat. " angular.io/guide/component-styles#deprecated-deep--and-ng-deep .
Devon Sams

5
Selama ini tetap sebagai jawaban yang diterima, orang akan menyesatkan. :: ng-deep tidak boleh digunakan sebagai poin @DevonSams dalam komentar di atas.
Kostas Siabanis

1
::ng-deepsekarang sudah usang , saya tidak merekomendasikan menggunakannya dalam aplikasi masa depan
Wilt

11
Mencela sesuatu tanpa memberikan alternatif mungkin bukan solusi terbaik.
tehlivi

56

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.


Sepertinya mereka akan menghapus dukungan untuk :: ng-deep angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Jed Richards

42

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
}

3
Ini adalah jawaban terbaik IMO, karena sebenarnya merupakan alternatif yang layak untuk yang akan segera ditinggalkan ::ng-deep. Secara umum, komponen memiliki pemilihnya sendiri ( <my-component>, <div my-component>, dll.) Sehingga bahkan tidak perlu elemen pembungkus dengan kelas khusus.
Alex Walker

@AlexWalker Ini mungkin jawaban terbaik untuk situasi Anda , tetapi perlu disebutkan bahwa itu hanya menjawab setengah dari pertanyaan OP: "Metode ini memungkinkan CSS untuk menyebar seperti biasa dari atas ke bawah, tetapi, berdasarkan membuang SEMUA enkapsulasi, tidakkah dapat membatasi penataan tersebut untuk anak-anak dari orang tua tertentu . Jika Anda gaya anak-anak dari parent1 satu arah dan anak-anak dari parent2 yang lain, aturan-aturan CSS sekarang akan saling bertarung di kedua tempat. Itu bisa sangat menyakitkan pikiran (dan Angular menambahkan enkapsulasi untuk menghindarinya).
ruffin

@ruffin Itulah mengapa saya menambahkan peringatan dalam jawaban saya untuk memahami implikasi menggunakan teknik ini dan bagaimana "merangkum secara manual" menggunakan tag css teratas pada komponen Anda
Tonio

1
@Tonio - Yap, setuju; membalas langsung ke Alex daripada Anda. Komentarnya, " jadi bahkan tidak perlu elemen pembungkus dengan kelas khusus " sedikit membuatku takut. Mungkin untuk situasi tertentu , tetapi ada alasan Angular "membuang" waktu mendukung enkapsulasi. Jawaban ini adalah solusi yang bisa diterapkan dalam kasus-kasus tertentu, tetapi, seperti yang Anda katakan, secara umum berbahaya. Solusi MatthewB ini , misalnya, gaya anak-anak sementara menjaga enkapsulasi (tapi itu akan benar-benar berantakan jika Anda memiliki lebih dari satu generasi komponen anak).
ruffin

19

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


16

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


11

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


9

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

7

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

   }
 }

3
Sebenarnya itu berarti gaya mempengaruhi dom keseluruhan, bukan hanya elemen anak.
Kasper Ziemianek

7

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.


Sepertinya solusi yang bagus, apakah ada file parent.component.scss? jika ya, mau memberikannya?
Manohar Reddy Poreddy

@ManoharReddyPoreddy Seharusnya tidak ada gaya yang parent.component.scssterkait dengan gaya komponen anak. Ini satu-satunya tujuan dari pendekatan ini. Mengapa Anda perlu parent.component.scss?
Alexander Abakumov

Tidak yakin, hanya tahu sedikit css. Bisakah Anda membagikan solusi lengkap di jsbin, atau lainnya. Solusi Anda dapat menjadi solusi masa depan untuk semua orang.
Manohar Reddy Poreddy

2
@ ManoharReddyPoreddy Saya sarankan Anda untuk mencoba potongan-potongan kode dalam praktek terlebih dahulu Kemudian, jika Anda mengalami masalah apa pun, Anda akan memiliki pertanyaan spesifik yang bisa saya jawab atau saran untuk melihat topik tertentu untuk mendapatkan pemahaman tentang cara memperbaiki masalah Anda. Saya sebutkan ViewEncapsulationhanya karena nilai standarnya adalah apa yang mengarah ke pertanyaan OP. Anda tidak perlu menetapkan yang lain ViewEncapsulationagar kode di atas berfungsi.
Alexander Abakumov

1
+1 Terima kasih. Akan kembali untuk mengambil solusi ini di masa depan, diselesaikan untuk :: ng-deep stackoverflow.com/a/36528769/984471 untuk hari ini.
Manohar Reddy Poreddy

5

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>

2
Juga sulit dirawat, terutama untuk komponen rekursif.
Erik Philips

2

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

0

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


Yah mereka sudah mengatakan secara eksplisit dalam dokumen mereka bahwa mereka akhirnya melakukannya, yang saya kira berarti mereka akan melakukannya. Saya setuju, tidak terjadi dalam waktu dekat.
Jed Richards

Jadi mereka akan membuat perpustakaan Material mereka sendiri menjadi tidak berguna. Saya tidak pernah bisa menggunakan tema default di perpustakaan mana pun karena setiap pelanggan memerlukan desain mereka sendiri. Biasanya Anda hanya menginginkan fungsionalitas suatu komponen. Saya tidak bisa mengatakan saya memahami keseluruhan logika mereka di balik keputusan ini.
Chrillewoodz

0

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


Menarik! Saya berakhir dengan sesuatu yang serupa (untuk saat ini). Dari mana Anda mendapatkan DomSanitizer? Sunting: Ditemukan: angular.io/api/platform-browser/DomSanitizer
Zaphoid

ya di v7 itu asli Anda hanya perlu meminta injeksi itu di konstruktor. ;), pada yang lebih tua saya tidak tahu apakah itu ada - saya mulai dari v7;)
d00lar

0

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


-1

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

-1

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.