تحديد حصيرة التصميم في مادة زاوية

عند تخصيص مظهر تحديد حصيرة، قد تواجه تحديات في تصميم مكون اللوحة الخاص بها. على الرغم من اتباع النهج الموصى به لاستخدام خاصية PanelClass لتحديد الأنماط المخصصة، إلا أن الأنماط لا يمكن تطبيقها، مما يجعلك في حيرة من أمرك.

لماذا لا تعمل الأنماط

تستخدم Angular Material اختيار حصيرة. -المحتوى كاسم الفئة لمحتوى القائمة المحددة. لتصميم هذا المكون، تتوفر عدة طرق:

1. استخدام ::ng-deep

توظيف أداة الدمج التابعة ::ng-deep Shadow-piercing لفرض الأنماط من خلال المكونات الفرعية.

::ng-deep .mat-select-content {
  width: 2000px;
  background-color: red;
  font-size: 10px;
}

2. استخدام ViewEncapsulation

قم بتكوين تغليف عرض المكون على لا شيء، مما يسمح للأنماط بالهروب من عزلة المكون.

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

3. ضبط نمط الفصل في style.css

استخدم ملف style.css لتحديد الأنماط المخصصة، وفرضها بـ !important لتجاوز أي أنماط موجودة.

.mat-select-content {
  width: 2000px !important;
  background-color: red !important;
  font-size: 10px !important;
}

4. استخدام النمط المضمن

تطبيق الأنماط المضمنة مباشرة على عناصر خيار حصيرة، وتجاوز أي أنماط موروثة.