Bagaimana Menggayakan Komponen Angular Child daripada CSS Komponen Induk?

Bagaimana Menggayakan Komponen Anak daripada Fail CSS Komponen Induk?

Masalah:

Dalam aplikasi Sudut, ibu bapa komponen mengandungi beberapa komponen kanak-kanak. Matlamatnya adalah untuk menggayakan komponen anak menggunakan fail CSS komponen induk. Walau bagaimanapun, gaya yang ditakrifkan dalam komponen induk tidak digunakan pada komponen anak disebabkan pengasingan komponen.

PENYELESAIAN:

KEMASKINI: Ciri Dihentikan

Penggabung CSS tindik tidak digunakan dalam Angular 4.3.0 dan lebih baru. Elakkan menggunakan kaedah ini jika boleh.

Pendekatan Terkini: ::ng-deep Operator

Untuk menggayakan komponen anak daripada fail CSS komponen induk, gunakan ::ng -pengendali dalam. Pengendali ini membenarkan gaya menembusi sempadan enkapsulasi dan menjejaskan komponen kanak-kanak.

:host {
  color: red;
}

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

Pendekatan Lama: Piercing CSS Combinators

Sebelum pengenalan ::ng- penggabung CSS yang mendalam dan menusuk seperti >>>, /deep/ dan ::bayang boleh digunakan. Walau bagaimanapun, ciri ini kini telah ditamatkan dan harus dielakkan.

Contoh:

:host {
  color: red;
}

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

Atas ialah kandungan terperinci Bagaimana Menggayakan Komponen Angular Child daripada CSS Komponen Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!