Bagaimanakah saya boleh menggayakan komponen bersarang daripada induknya dalam Angular menggunakan ::ng-deep?

Memudahkan Penggayaan Shadow-Piercing dengan ::ng-deep in Angular

Keperluan untuk menggayakan komponen bersarang daripada induk mereka adalah cabaran biasa dalam Sudut. Walaupun penggabung /deep/ yang ditamatkan pernah menjadi penyelesaian, kini disyorkan untuk menggunakan pemilih ::ng-deep.

Tujuan ::ng-deep

::ng-deep membolehkan anda menembusi enkapsulasi komponen dan menggunakan gaya pada komponen anak daripada induk. Keupayaan ini amat berguna apabila anda perlu mengatasi atau melengkapkan gaya sedia ada kanak-kanak.

Sintaks dan Contoh

Sintaks ::ng-deep adalah seperti berikut:

<code class="css">::ng-deep {
  /* Styles to apply to child components */
}</code>

Sebagai contoh, jika anda mempunyai komponen induk dengan elemen div dan anda ingin menggayakan elemen perenggan dalam komponen anaknya, anda boleh menggunakan kod berikut:

<code class="html"><div class="parent-div">
  <child-component></child-component>
</div></code>

<code class="css">.parent-div {
  ::ng-deep {
    p {
      color: red;
    }
  }
}</code>

CSS ini akan mengatasi warna lalai elemen perenggan dalam komponen anak.

Keserasian IE11

Adalah penting untuk ambil perhatian bahawa ::ng-deep tidak disokong oleh Internet Explorer 11. Oleh itu, jika anda menyasarkan IE11, anda mungkin perlu meneroka pendekatan alternatif kepada penggayaan shadow-piercing, seperti membungkus komponen kanak-kanak dalam div dan menggayakan div tersebut sebaliknya.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggayakan komponen bersarang daripada induknya dalam Angular menggunakan ::ng-deep?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!