Rumah > hujung hadapan web > tutorial css > Bagaimanakah saya boleh menggayakan komponen kanak-kanak dalam Angular 4 menggunakan ::ng-deep?

Bagaimanakah saya boleh menggayakan komponen kanak-kanak dalam Angular 4 menggunakan ::ng-deep?

Barbara Streisand
Lepaskan: 2024-10-29 10:05:02
asal
923 orang telah melayarinya

How can I style child components in Angular 4 using ::ng-deep?

Menggayakan Komponen Kanak-kanak dalam Sudut 4 dengan ::ng-deep

Menimpa sifat CSS daripada komponen induk kepada anak boleh menjadi tugas biasa dalam bersudut. Dalam Angular 4, anda boleh memanfaatkan pemilih ::ng-deep untuk mencapainya.

::ng-deep, dahulunya dikenali sebagai /deep/ dan kemudian >>> , ialah penggabung yang menusuk bayang-bayang yang membolehkan gaya mengalir ke elemen bersarang, walaupun ia terkandung dalam komponen kanak-kanak. Ini amat berguna apabila menyesuaikan penampilan elemen dalam komponen atau pustaka luaran.

Penggunaan

Untuk menggunakan ::ng-deep, hanya awalan ia pada pemilih CSS anda mahu gunakan pada elemen komponen kanak-kanak. Contohnya:

.parent {
  ::ng-deep .child-element {
    color: red;
  }
}
Salin selepas log masuk

Keserasian

Adalah penting untuk ambil perhatian bahawa ::ng-deep tidak disokong dalam Internet Explorer 11 (IE11). Ini kerana IE11 tidak menyokong penggabung bayang-piercing. Atas sebab ini, adalah disyorkan untuk menggunakan kaedah alternatif untuk menggayakan komponen kanak-kanak dalam IE11, seperti menggunakan bendera View Encapsulation atau mencipta modul Sudut yang mendedahkan gaya yang diingini.

Contoh

Pertimbangkan HTML berikut:

<code class="html"><div class="container">
  <app-child-component></app-child-component>
</div></code>
Salin selepas log masuk

Dan CSS berikut:

<code class="css">.container {
  ::ng-deep {
    .child-element {
      color: blue;
    }
  }
}</code>
Salin selepas log masuk

CSS ini akan menggunakan warna biru pada semua elemen dengan elemen anak kelas dalam app-child-component.

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan