Ubah warna tombol radio di Material 2 dengan CSS biasa

Saya mengalami masalah dalam mengubah warna tombol radio komponen Angular Material 2. Saya mencari jawaban lain dan tidak berhasil.

Berikut adalah plunkr dari contoh tombol radio Material 2:

https://plnkr.co/edit/JNDRKkF2oAxU5gPsR4lO?p=preview

Saya tahu ini akan berhasil dengan jalur ini

<md-radio-button color="primary" class="example-radio-button"
   *ngFor="let season of seasons" [value]="season">
    {{season}}
</md-radio-button>

Namun saya tidak dapat menggunakan properti "warna" karena kami menggunakan Material 2 versi lama dan saat ini kami tidak dapat memutakhirkannya.

Jadi siapapun yang tahu bagaimana melakukannya dengan CSS biasa pada contoh di atas saya akan sangat berterima kasih. Saya mencobanya selama lebih dari satu jam sekarang ..


angular angular-material angular-material2
person sanyooh    schedule 18.08.2017    source sumber
comment
Maksud Anda tidak bisa menggunakan 'warna', di css?   -  person Vega    schedule 18.08.2017
comment
atribut color=primary pada tombol md-radio   -  person sanyooh    schedule 18.08.2017
comment
Lihat jawaban saya dari postingan ini   -  person Andrei Matracaru    schedule 18.08.2017

Jawaban (2)


arrow_upward
2
arrow_downward

Karena versi sudut Anda adalah 2.4.3, asumsi saya adalah Anda menggunakan materi versi beta.2 atau yang lebih lama (beta.3 dan yang lebih baru memerlukan sudut 4.x). Kelas-kelas di versi lama memiliki nama kelas yang berbeda dari yang sekarang. Jadi, Anda dapat mencoba css berikut:

Materi beta.1:

/deep/ .md-radio-inner-circle {
    background-color: skyblue;  /* Pick your color */
}

/deep/ .md-radio-checked .md-radio-outer-circle {
    border-color: skyblue;     /* Pick your color */
}

Demo Plunker menggunakan Angular 2.4.1 dan Material beta.1

Materi beta.2:

/deep/ .mat-radio-inner-circle {
    background-color: yellow;
}

/deep/ .mat-radio-checked .mat-radio-outer-circle {
    border-color: lime;
}

Demo Plunker menggunakan Angular 2.4.1 dan Material beta.2

person Nehal    schedule 18.08.2017

arrow_upward
2
arrow_downward

Anda dapat melakukannya menggunakan ::ng-deep. Tambahkan kelas berikut ke gaya komponen Anda:

/deep/  .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{
    border-color: green;
}

/deep/  .mat-radio-button.mat-accent .mat-radio-inner-circle{
    background-color: green;
}

Lihat DEMO PLUNKER

person Faisal    schedule 18.08.2017
comment
aplikasi kita masih berjalan dengan Angular 2.4.3 jadi saya tidak bisa menggunakan fitur ini - person sanyooh; 18.08.2017
comment
apakah /deep/ mirip dengan ::ng-deep? - person Pankaj Parkar; 18.08.2017
comment
dengan 2.4.3, gunakan /deep/ ... lihat jawaban yang diperbarui, plunker juga diperbarui. - person Faisal; 18.08.2017
comment
sayangnya solusi ini tidak berfungsi di aplikasi kami. tapi terima kasih atas usahamu. kami akan menyimpannya dalam warna aksen untuk saat ini dan memperbaikinya saat kami memperbarui versi Angular dan Material 2. - person sanyooh; 18.08.2017
comment
bisakah kamu membuat plunker? - person Faisal; 18.08.2017
comment
tidak maaf, akan memakan banyak waktu dan itu hanya sebagian kecil dari aplikasi kita. saya hanya bertanya-tanya mengapa saya tidak bisa mengganti kelas css dari komponen md dalam kasus yang sama. - person sanyooh; 18.08.2017