Untuk aplikasi saya, saya menggunakan Desain Material Sudut untuk memasukkan komponen standar. Saya mengalami masalah yang saya perhatikan saat mendesain ulang komponen. Sebagian besar komponen dari lib Desain Material menyertakan komponen bersarang. Misalnya. ketika saya ingin menggunakan mat-expansion-panel, saya melakukannya sebagai berikut:

<mat-expansion-panel #panel hideToggle>
  <mat-expansion-panel-header>
    <div>Content</div>        
  </mat-expansion-panel-header>
</mat-expansion-panel>

Kode di atas mengarah ke kode berikut di browser:

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <span class="mat-content ng-tns-c145-72">  // Nested element
      <div>Content</div> 

Sayangnya, saya tidak memiliki akses ke objek bersarang dari stylesheet template. Ini berarti jika saya ingin membuat latar belakang class="mat-content menjadi biru, itu tidak akan berhasil. CSS tidak diterapkan ke elemen bersarang.

Bagaimana ini bisa diselesaikan? Saya bisa menambahkan CSS di aplikasi root, tetapi itu sangat berantakan dan mengarah ke kode yang tidak dapat dipelihara dengan baik.

0
laprof 12 Mei 2021, 01:59

1 menjawab

Jawaban Terbaik

Jika Anda tidak ingin menambahkan aturan ini ke lembar induk, Anda dapat menggunakan kelas semu ::ng-deep. Saya akan menyarankan untuk bersarang di kelas semu :host untuk membatasi ruang lingkup gaya Anda.

:host ::ng-deep {
  .mat-content {
    background: #59f;
  }
}

https://stackblitz.com/edit/angular-8hz1gx?file=src%2Fapp%2Fexpansion-overview-example.scss

1
robbieAreBest 12 Mei 2021, 02:42