Bagaimana untuk Menggayakan Komponen Kanak-kanak daripada CSS Komponen Induk dalam Sudut?

Bagaimana Menggayakan Komponen Anak daripada Fail CSS Komponen Induk?

Dalam Sudut, menggayakan komponen anak daripada fail CSS komponen induk memerlukan cara untuk menembusi skop komponen. Begini cara untuk mengatasi had ini.

Kemas kini (Angular 4.3.0 dan Ke Atas)

Dengan penamatan penggabung CSS menusuk, yang baharu, ::ng-deep, telah diperkenalkan. Ia membolehkan anda menyasarkan komponen kanak-kanak jauh dalam struktur DOM.

:host ::ng-deep parent {
  color: blue;
}
:host ::ng-deep child {
  color: orange;
}

Cara Lama (Versi Sudut Sebelum 4.3.0)

Sebelum ::ng-deep, anda boleh menggunakan tindikan Penggabung CSS seperti >>>, /deep/ dan ::shadow untuk menembusi sempadan komponen. Walau bagaimanapun, ambil perhatian bahawa penggabung ini tidak digunakan dan harus dielakkan jika boleh.

:host >>> parent {
  color: blue;
}
:host >>> child {
  color: orange;
}

Pendekatan Alternatif

• Mod Enkapsulasi: Secara lalai, komponen dikapsulkan menggunakan Shadow DOM, menghalang gaya daripada bocor di luar komponen. Anda boleh melumpuhkan enkapsulasi dengan menetapkan sifat enkapsulasi kepada Tiada dalam penghias komponen (@Component).
• styleUrls: Gunakan sifat styleUrls dalam komponen anak untuk mengimport gaya daripada komponen induk. Ini membolehkan anda mengakses helaian gaya komponen induk dalam skop komponen anak. Walau bagaimanapun, pendekatan ini memerlukan penentuan gaya secara manual untuk komponen kanak-kanak dalam helaian gaya ibu bapa.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Komponen Kanak-kanak daripada CSS Komponen Induk dalam Sudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!