Bagaimanakah saya boleh mengatasi sifat CSS komponen kanak-kanak dalam Angular 4 menggunakan ::ng-deep?

Menulis Ganti Sifat CSS Komponen Anak dengan ::ng-deep dalam Angular 4

Dalam Sudut 4, pemilih ::ng-deep membenarkan anda untuk mengatasi sifat CSS komponen anak dari dalam CSS komponen induk. Ini dicapai dengan menembusi sempadan DOM bayangan komponen kanak-kanak.

Penggunaan:

Untuk menggunakan ::ng-deep, cuma tambahkannya pada pemilih CSS yang menyasarkan elemen komponen kanak-kanak, seperti ini:

<code class="css">::ng-deep .child-component {
  /* CSS properties to override */
}</code>

Contoh:

Pertimbangkan struktur HTML berikut:

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

Untuk mengatasi gaya elemen p dalam komponen kanak-kanak, anda boleh menggunakan CSS berikut dalam komponen induk:

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

Sokongan IE11:

::ng -deep tidak disokong dalam Internet Explorer 11. Jika anda perlu menyokong IE11, anda harus menggunakan pemilih alternatif :host-context() sebaliknya. Walau bagaimanapun, :host-context() mempunyai hadnya sendiri dan mungkin tidak sesuai untuk semua kes.

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