ช่องทำเครื่องหมาย Material UI CSS กำลังแทนที่ส่วนประกอบต่างๆ ในรูปแบบเชิงมุม

ฉันกำลังพยายามแทนที่ CSS ช่องทำเครื่องหมาย Material UI ใน Home Component ของฉัน และมันทำงานได้ดี แต่มีผลข้างเคียงเช่น css ของช่องทำเครื่องหมายในองค์ประกอบของแบบฟอร์มกำลังแทนที่ ใครสามารถแนะนำวิธีแก้ปัญหาสำหรับสิ่งนี้ได้

HTML ที่ใช้

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

css ใช้สำหรับการขี่เกินโดยค่าเริ่มต้นจะเป็นสีเทา

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

ช่องทำเครื่องหมาย Mat ส่วนประกอบของฟอร์ม - สำหรับส่วนประกอบนี้จะแทนที่สีเส้นขอบเป็นสีน้ำเงินโดยไม่ต้องเขียน CSS ใด ๆ

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

ฉันเชื่อว่าสิ่งนี้เกิดขึ้นเนื่องจากการใช้ ::ng-deep

ฉันยังลองใช้ ViewEncapsulation ในคอมโพเนนต์ Home ด้วย มันยังคงเอาชนะ CSS ในองค์ประกอบแบบฟอร์มและ CSS อื่น ๆ ในองค์ประกอบทั้งสอง

ความช่วยเหลือใด ๆ เกี่ยวกับเรื่องนี้จะได้รับการชื่นชม


angular html css angular-material
person Kalyan    schedule 13.08.2020    source แหล่งที่มา

คำตอบ (1)


arrow_upward
4
arrow_downward

หากต้องการใช้สไตล์เฉพาะภายในคอมโพเนนต์ย่อย ให้เพิ่มตัวเลือก :host ให้กับโค้ดต่อไปนี้ใน CSS ของคอมโพเนนต์นั้น:

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

การดำเนินการนี้จะกำหนดขอบเขตกฎนี้ให้กับช่องทำเครื่องหมายทั้งหมดที่อยู่ในองค์ประกอบปัจจุบันนี้และองค์ประกอบย่อยทั้งหมด และจะทำงานได้ดีในกรณีที่มีส่วนประกอบที่กำหนดเส้นทาง

แต่ถ้าคุณต้องการติดกฎ CSS นี้กับเทมเพลตโฮมเพจเท่านั้น คุณสามารถใช้:

home.component.css

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

เชิงมุมจะแทนที่ด้วย:

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

โดยที่ _ngcontent-rvb-c0 คือตัวระบุเฉพาะขององค์ประกอบปัจจุบัน

person ConnorsFan    schedule 13.08.2020
comment
มันจะไม่แทนที่ช่องทำเครื่องหมายในส่วนประกอบย่อยด้วยหรือไม่ จะดีกว่าไหมถ้าใช้ .mat-checkbox ::ng-deep .mat-checkbox-frame ใน home.component.css - person yurzui; 13.08.2020
comment
ฉันหมายถึงการใช้โค้ดด้านบนใน home.component.css (ฉันจะอัปเดตคำตอบ) จากการทดสอบของฉัน เราต้องระบุ :home แม้ว่า ::ng-deep จะอยู่ใน CSS ลูกก็ตาม - person ConnorsFan; 13.08.2020
comment
ใช่ ฉันเข้าใจว่าโค้ดนี้ควรไปที่ home.component.css - person yurzui; 13.08.2020
comment
@yurzui - ข้อเสนอแนะของคุณเกี่ยวกับการแลกเปลี่ยน ::ng-deep และ .mat-checkbox หรือไม่ ฉันไม่ได้ลอง (และ stackblitz ของฉันไม่ได้กำหนดค่าสำหรับการทดสอบ) - person ConnorsFan; 13.08.2020
comment
stackblitz.com/edit/angular-hm4bxn? ไฟล์=src/app/child/ - person yurzui; 13.08.2020
comment
และเปรียบเทียบกับ stackblitz.com/edit / - person yurzui; 13.08.2020
comment
ตกลง. ฉันเห็น. ฉันได้ทดสอบองค์ประกอบ input แบบง่าย ๆ ใน สิ่งนี้ สแต็กบลิทซ์. - person ConnorsFan; 13.08.2020
comment
ใช่ คำแนะนำของฉันคือสลับ ::ng-deep กับ .mat-checkbox เพื่อกำหนดขอบเขตกฎ css สำหรับช่องทำเครื่องหมายที่อยู่ในหน้าแรกเท่านั้น แต่บางทีเราอาจไม่ได้ตระหนักถึงกรณีการใช้งาน OP ทั้งหมด และโซลูชันของคุณก็จะใช้ได้กับกรณีเหล่านั้น - person yurzui; 13.08.2020
comment
@yurzui - คุณสามารถโพสต์ข้อเสนอแนะของคุณเป็นคำตอบ ฉันจะลบของฉัน :-) - person ConnorsFan; 13.08.2020
comment
มาปรับปรุงคำตอบของคุณกันเถอะ :) - person yurzui; 13.08.2020
comment
@yurzui - ฉันเพิ่งรู้ว่าฉันอ่านตัวอย่างของคุณผิด (หรือคำถาม) สำหรับฉัน องค์ประกอบ Home เป็นองค์ประกอบลูก และ OP ต้องการจำกัด CSS ให้กับลูกนั้น เช่น child-1 ใน stackblitz นี้ - person ConnorsFan; 15.08.2020