Kotak centang material ui css menimpa seluruh komponen dalam sudut

Saya mencoba mengganti kotak centang UI materi css di Komponen Rumah saya dan itu berfungsi dengan baik. Tetapi ada efek samping seperti css kotak centang di komponen formulir ditimpa. Adakah yang bisa menyarankan solusi untuk ini.

HTML digunakan

 <mat-checkbox formControlName="home">
  Home
</mat-checkbox>

css yang digunakan untuk over riding secara default berwarna abu-abu

::ng-deep .mat-checkbox .mat-checkbox-frame {
border-color: blue !important;
}

Kotak centang mat komponen formulir - untuk komponen ini juga mengganti warna batas menjadi biru tanpa menulis css apa pun

<mat-checkbox formControlName="form">
  Form
</mat-checkbox>

Saya yakin ini terjadi karena penggunaan ::ng-deep

Saya bahkan mencoba ViewEncapsulation juga di komponen Home. Itu masih mengganti css di komponen Formulir dan css lain di kedua komponen.

Bantuan apa pun terkait hal ini akan sangat kami hargai.


angular html css angular-material
person Kalyan    schedule 13.08.2020    source sumber

Jawaban (1)


arrow_upward
4
arrow_downward

Untuk menerapkan gaya hanya di dalam komponen turunan tertentu, tambahkan pemilih :host ke kode berikut di CSS komponen tersebut:

:host ::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: blue !important;
}

Ini akan mencakup aturan ini ke semua kotak centang yang ada di komponen saat ini dan semua turunannya dan akan bekerja dengan cukup baik jika ada komponen yang dirutekan.

Tetapi jika Anda ingin menerapkan aturan css ini hanya untuk templat halaman beranda maka Anda dapat menggunakan:

home.component.css

.mat-checkbox ::ng-deep  .mat-checkbox-frame {
  border-color: blue !important;
}

Angular akan menggantinya dengan:

.mat-checkbox[_ngcontent-rvb-c0] .mat-checkbox-frame {
    border-color: blue !important;
}

di mana _ngcontent-rvb-c0 adalah pengidentifikasi unik komponen saat ini

person ConnorsFan    schedule 13.08.2020
comment
Bukankah itu juga akan menimpa kotak centang di komponen anak? Bukankah lebih baik menggunakan .mat-checkbox ::ng-deep .mat-checkbox-frame di home.component.css? - person yurzui; 13.08.2020
comment
Maksud saya menggunakan kode di atas di home.component.css (saya akan memperbarui jawabannya). Menurut pengujian saya, kita juga harus menentukan :home meskipun ::ng-deep ada di CSS anak. - person ConnorsFan; 13.08.2020
comment
Ya, saya memahami bahwa kode ini harus menuju ke home.component.css. - person yurzui; 13.08.2020
comment
@yurzui - Apakah saran Anda tentang menukar ::ng-deep dan .mat-checkbox? Saya belum mencobanya (dan stackblitz saya tidak dikonfigurasi untuk mengujinya). - person ConnorsFan; 13.08.2020
comment
stackblitz.com/edit/angular-hm4bxn? file=src/app/child/ - person yurzui; 13.08.2020
comment
Dan bandingkan dengan stackblitz.com/edit / - person yurzui; 13.08.2020
comment
OKE. Jadi begitu. Saya telah menguji elemen input sederhana di ini tumpukanblitz. - person ConnorsFan; 13.08.2020
comment
Ya, saran saya adalah menukar ::ng-deep dengan .mat-checkbox untuk mencakup aturan css hanya untuk kotak centang yang ada di halaman beranda. Tapi mungkin kami tidak mengetahui semua kasus penggunaan OP dan solusi Anda akan berhasil untuk kasus tersebut - person yurzui; 13.08.2020
comment
@yurzui - Anda dapat mengirimkan saran Anda sebagai jawaban. Aku akan menghapus milikku. :-) - person ConnorsFan; 13.08.2020
comment
Ayo tingkatkan jawabanmu :) - person yurzui; 13.08.2020
comment
@yurzui - Saya baru menyadari bahwa saya salah membaca contoh Anda (atau pertanyaannya). Bagi saya, komponen Home adalah komponen anak, dan OP ingin membatasi CSS untuk anak tersebut, seperti child-1 di tumpukan ini. - person ConnorsFan; 15.08.2020