css - تنسيق mat-select في Angular Material

كيفية تنسيق مكون لوحة mat-select. من الوثائق أفهم أنني بحاجة لتوفير panelClass لذلك أقوم بذلك هكذا:

<mat-form-field>
  <mat-select placeholder="Search for"
    [(ngModel)]="searchClassVal"
    panelClass="my-select-panel-class"
    (change)="onSearchClassSelect($event)">
    <mat-option *ngFor="let class of searchClasses" [value]="class.value">{{class.name}}</mat-option>
  </mat-select>
</mat-form-field>

لقد فحصت في أدوات المطورين أن هذه الفئة متصلة باللوحة في DOM وهي متصلة. لذا لدي فئة SCSS مخصصة متصلة بهذا العنصر. الآن عندما أقدم CSS فإنه ببساطة لا يعمل. على سبيل المثال، يبدو SCSS الخاص بي هكذا:

.my-select-panel-class {
    width:20px;
    max-width:20px;
    background-color: red;
    font-size: 10px;
}

عرض اللوحة دائمًا يساوي عرض عنصر التحديد. أحيانًا في الخيارات تكون هناك سلاسل طويلة جدًا وأود أن أجعلها أعرض قليلًا. هل هناك أي طريقة للقيام بذلك؟ أسلوبي من مكوني لا يعمل حتى لون الخلفية لا يعمل. هل يعرف أحد لماذا يتصرف هذا بشكل غريب؟

أنا أستخدم: Angular 4.4.5 @angular/material: 2.0.0-beta.12

الإجابة رقم 1

بالنسبة لـ Angular9 وما بعده، وفقًا لذلك، يمكنك استخدام:

.mat-select-panel {
    background: red;
    ....
}

تجريبي

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

استخدم المُركّب الهابط /deep/ المخترق للظل لإجبار نمط على التسلل عبر شجرة المكونات الفرعية إلى جميع عرض المكونات الفرعية. يعمل المُركّب /deep/ على أي عمق من المكونات المتداخلة، وينطبق على كل من أطفال العرض وأطفال المحتوى للمكون. استخدم /deep/ و >>> و ::ng-deep فقط مع تغليف العرض المحاكى. المحاكى هو الافتراضي والأكثر استخدامًا لتغليف العرض. لمزيد من المعلومات، راجع قسم التحكم في تغليف العرض. المُركّب الهابط المخترق للظل أصبح قديمًا وسيتم إزالة دعمه من المتصفحات والأدوات الرئيسية. لذلك نخطط لإسقاط الدعم في Angular (لكل من /deep/ و >>> و ::ng-deep). وحتى ذلك الحين، يجب تفضيل ::ng-deep لتوافق أوسع مع الأدوات.

سي إس إس:

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

تجريبي

2. استخدم تغليف العرض

... يتم تضمين أنماط CSS الخاصة بالمكوّن داخل عرض المكوّن ولا تؤثر على باقي التطبيق. للتحكم بكيفية حدوث هذا التضمين على أساس كل مكوّن، يمكنك ضبط وضع تضمين العرض في بيانات تعريف المكوّن. اختر من الأوضاع التالية: .... تعني None أن Angular لا تقوم بأي تضمين للعرض. تقوم Angular بإضافة CSS إلى الأنماط العالمية. قواعد النطاق، والعزلات، والحمايات التي نوقشت سابقًا لا تنطبق. هذا في الأساس يشبه نسخ أنماط المكوّن إلى HTML.

قيمة None هي ما ستحتاجه لكسر التغليف وتعيين نمط المادة من مكونك. لذلك يمكنك التعيين على محدد المكون:

تايبسكريبت:

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  

سي إس إس

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

تجريبي

3. تعيين نمط الفئة في style.css

هذه المرة عليك أيضًا أن تُـ'تفرض' الأنماط باستخدام !important.

style.css

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

تجريبي

4. استخدم التنسيق المضمّن

<mat-option style="width:2000px; background-color: red; font-size: 10px;" ...>

تجريبي

الإجابة رقم 2

ضع اسم الفصل الخاص بك على عنصر mat-form-field. هذا يعمل مع جميع المدخلات.