เปลี่ยนสีปุ่มตัวเลือกใน Material 2 ด้วย CSS ธรรมดา

ฉันมีปัญหาในการเปลี่ยนสีของปุ่มตัวเลือกของส่วนประกอบ Angular Material 2 ฉันค้นหาคำตอบอื่น ๆ และไม่สามารถทำงานได้

นี่คือเสียงสะท้อนจากตัวอย่างปุ่มตัวเลือก Material 2:

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

ฉันรู้ว่ามันจะใช้ได้กับบรรทัดนี้

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

แต่ฉันไม่สามารถใช้คุณสมบัติ "สี" ได้เนื่องจากเราใช้ Material 2 เวอร์ชันเก่ากว่าและเราไม่สามารถอัปเกรดได้ในขณะนี้

ดังนั้นใครก็ตามรู้วิธีการใช้ CSS ธรรมดาในตัวอย่างข้างต้น ฉันจะขอบคุณมาก ผมลองมาชั่วโมงกว่าแล้ว..


angular angular-material angular-material2
person sanyooh    schedule 18.08.2017    source แหล่งที่มา
comment
คุณหมายถึงอะไรไม่สามารถใช้ 'สี' ใน css ได้?   -  person Vega    schedule 18.08.2017
comment
คุณลักษณะ color=primary บนปุ่ม md-radio   -  person sanyooh    schedule 18.08.2017
comment
ดูคำตอบของฉันจากโพสต์นี้   -  person Andrei Matracaru    schedule 18.08.2017

คำตอบ (2)


arrow_upward
2
arrow_downward

เนื่องจากเวอร์ชันเชิงมุมของคุณคือ 2.4.3 ฉันสันนิษฐานว่าคุณกำลังใช้วัสดุรุ่นเบต้า.2 หรือเก่ากว่า (เบต้า.3 และใหม่กว่าต้องใช้เชิงมุม 4.x) คลาสในเวอร์ชันเก่ามีชื่อคลาสที่แตกต่างจากคลาสปัจจุบัน ดังนั้นคุณสามารถลองทำตาม css:

วัสดุเบต้า.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 */
}

การสาธิต Plunker โดยใช้ Angular 2.4.1 และ Material beta.1

วัสดุเบต้า.2:

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

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

การสาธิต Plunker โดยใช้ Angular 2.4.1 และ Material beta.2

person Nehal    schedule 18.08.2017

arrow_upward
2
arrow_downward

คุณสามารถทำได้โดยใช้ ::ng-deep เพิ่มคลาสต่อไปนี้ให้กับสไตล์ส่วนประกอบของคุณ:

/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;
}

ดูการสาธิต PLUNKER

person Faisal    schedule 18.08.2017
comment
แอปพลิเคชันของเรายังคงทำงานด้วยเชิงมุม 2.4.3 ดังนั้นฉันจึงใช้คุณสมบัตินี้ไม่ได้ - person sanyooh; 18.08.2017
comment
/deep/ คล้ายกับ ::ng-deep ไหม - person Pankaj Parkar; 18.08.2017
comment
ด้วย 2.4.3 ใช้ /deep/ ... ดูคำตอบที่อัปเดต plunker ก็อัปเดตด้วย - person Faisal; 18.08.2017
comment
ขออภัย โซลูชันนี้ใช้ไม่ได้กับแอปพลิเคชันของเรา แต่ขอบคุณสำหรับความพยายามของคุณ เราจะเก็บมันไว้ในสีที่ถูกเน้นในตอนนี้และแก้ไขเมื่อเราอัปเดตเวอร์ชัน Angular และ Material 2 - person sanyooh; 18.08.2017
comment
คุณสร้างคนวางระเบิดได้ไหม? - person Faisal; 18.08.2017
comment
ไม่ขอโทษ ฉันจะใช้เวลามากเกินไปและนี่เป็นเพียงส่วนเล็กๆ ของการสมัครของเรา ฉันแค่สงสัยว่าทำไมฉันไม่สามารถแทนที่คลาส css ของ md-component ได้ในกรณีนี้ - person sanyooh; 18.08.2017