css - การปรับแต่ง mat-select ใน Angular Material

วิธีการจัดสไตล์คอมโพเนนต์ panel ของ 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;
}

ความกว้างของแผงจะเท่ากับ width ขององค์ประกอบ select เสมอ บางครั้งในตัวเลือกคุณมีสตริงที่ยาวเกินไปและฉันต้องการที่จะทำให้มันกว้างขึ้นเล็กน้อย มีวิธีใดที่จะทำสิ่งนี้ได้ไหม สไตล์จากคอมโพเนนต์ของฉันใช้ไม่ได้แม้แต่ background-color ก็ใช้ไม่ได้ มีใครรู้ไหมว่าทำไมมันถึงทำงานแปลก ๆ แบบนี้

ฉันกำลังใช้: 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. ใช้ ViewEncapsulation

... สไตล์ CSS ของคอมโพเนนต์จะถูกห่อหุ้มอยู่ภายในวิวของคอมโพเนนต์และจะไม่ส่งผลกระทบต่อส่วนอื่น ๆ ของแอปพลิเคชัน เพื่อควบคุมวิธีการห่อหุ้มนี้ในแต่ละคอมโพเนนต์ คุณสามารถตั้งค่ารูปแบบการห่อหุ้มวิวในเมตาดาต้าของคอมโพเนนต์ เลือกจากโหมดต่อไปนี้: ... None หมายความว่า Angular จะไม่ทำการห่อหุ้มวิว Angular จะเพิ่ม CSS ลงในสไตล์ทั่วโลก กฎการกำหนดขอบเขต การแยก และการป้องกันที่กล่าวถึงก่อนหน้านี้จะไม่สามารถใช้ได้ ซึ่งโดยพื้นฐานแล้วเหมือนกับการวางสไตล์ของคอมโพเนนต์ลงใน HTML

ค่า None คือสิ่งที่คุณจะต้องใช้เพื่อทำลายการห่อหุ้มและตั้งค่าสไตล์วัสดุจากคอมโพเนนต์ของคุณ ดังนั้นสามารถตั้งค่าได้ที่ตัวเลือกของคอมโพเนนต์:

ไทป์สคริปต์:

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

CSS

.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 วิธีนี้ใช้ได้กับทุกอินพุต