Stylingmat-select in hoekig materiaal

Hoe de paneelcomponent van mat-select op te maken. Uit de documenten die ik krijg dat ik panelClass moet leveren, maak ik het als volgt:

<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>

Ik heb in ontwikkelaarstools gecontroleerd of deze klasse is gekoppeld aan het paneel in DOM en deze is ook gekoppeld. Dus ik heb mijn aangepaste scss-klasse aan dit element gekoppeld. Als ik nu css geef, werkt het gewoon niet. Mijn scss ziet er bijvoorbeeld zo uit:

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

De breedte van het paneel is altijd gelijk aan de widthvan het select element. Soms In opties Je hebt te lange snaren en ik zou het iets breder willen maken. Is er een manier om dit te doen. Mijn stijl van mijn component werkt gewoon niet, zelfs background-colorwerkt niet. Weet iemand waarom dit zich zo vreemd gedraagt?

Ik gebruik:
Hoekig 4.4.5
@hoekig/materiaal: 2.0.0-beta.12

Antwoord 1, autoriteit 100%

Voor Angular9+, volgens dit , je kunt het volgende gebruiken:

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

Demo

Angular Material gebruikt mat-select-contentals klassenaam voor de geselecteerde lijstinhoud. Voor de styling zou ik vier opties willen voorstellen.

1. Gebruik ::ng-deep:

Gebruik de /deep/ shadow-piercing descendant combinator om een ​​stijl te forceren
omlaag door de onderliggende componentboom naar alle onderliggende componenten
keer bekeken. De /deep/ combinator werkt op elke diepte van geneste componenten,
en het is van toepassing op zowel de weergavekinderen als de inhoudskinderen van de
onderdeel.
Gebruik /deep/, >>> en ::ng-deep alleen met inkapseling van geëmuleerde weergave.
Geëmuleerd is de standaard en meest gebruikte weergave-inkapseling. Voor
meer informatie, zie de sectie Inkapseling van de besturingsweergave. De
schaduwdoordringende descendant combinator is verouderd en ondersteuning is
worden verwijderd uit de belangrijkste browsers en tools. Als zodanig zijn we van plan om te laten vallen
ondersteuning in Angular (voor alle 3 van /deep/, >>> en ::ng-deep). Totdat
dan zou ::ng-deep de voorkeur moeten hebben voor een bredere compatibiliteit met
het gereedschap.

CSS:

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

DEMO

2. Gebruik ViewEncapsulation

… component CSS-stijlen zijn ingekapseld in de weergave van de component en
hebben geen invloed op de rest van de toepassing.
Om per component te bepalen hoe deze inkapseling plaatsvindt,
u kunt de weergave-inkapselingsmodus instellen in de metagegevens van de component.
Kies uit de volgende modi:
….
Geen betekent dat Angular geen inkapseling ziet. Angular voegt de . toe
CSS naar de globale stijlen. De scopingregels, isolaties en
eerder besproken beschermingen zijn niet van toepassing. Dit is in wezen de
hetzelfde als het plakken van de stijlen van de component in de HTML.

Geen waarde is wat u nodig hebt om de inkapseling te doorbreken en de materiaalstijl van uw component in te stellen.
Dus kan instellen op de selector van de component:

Typscript:

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

CSS

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

DEMO

3. Klasstijl instellen in style.css

Deze keer moet je stijlen ook ‘forceren’ met !important.

style.css

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

DEMO

4. Gebruik inline stijl

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

DEMO

Antwoord 2, autoriteit 6%

Zet je klassenaam op het mat-form-field-element. Dit werkt voor alle invoer.

Antwoord 3, autoriteit 2%

Werkende oplossing is door gebruik te maken van in-build: panelClassattribuut en set stijlen in global style.css (met !important):

https://material.angular.io/components/select/api

/* style.css */
.matRole .mat-option-text {
  height: 4em !important;
}

<mat-select panelClass="matRole">...

mat-form-field {
  width: 100%;
}

     <mat-select class="text-sm">
        <mat-option> Text </mat-option>
      </mat-select>

.text-sm {font-size: 0.75rem}

<mat-form-field class="booking-facility">
  <mat-select disableOptionCentering placeholder="facility" panelClass="booking-facility-select" [ngModel]="facilityId"
                      (ngModelChange)="updateFacility($event)">
    <mat-option *ngFor="let fac of facilities | keyvalue" [value]="fac.value.id">
      <span>{{ fac.value.name | lowercase }}</span>
    </mat-option>
  </mat-select>
</mat-form-field>

.booking-facility-styles {
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 1px;
  font-size: 22px;
  color: #55595C;
}
.booking-facility {
  // label
  @extend .booking-facility-styles;
  // label
  .mat-form-field-label {
    @extend .booking-facility-styles;
    color: #BBB !important;
  }
  .mat-select-value-text {
    // select
    @extend .booking-facility-styles;
  }
}
.booking-facility-select .mat-option {
  // options
  @extend .booking-facility-styles;
  font-size: 16px !important;
}

 .mat-form-field .mat-input-element, .mat-form-field .mat-select,
  .mat-form-field.mat-form-field-appearance-legacy .mat-input-element,
  .mat-form-field.mat-form-field-appearance-legacy .mat-select {
    background-color: #0A0A0A !important;
    .mat-select-value {
      color: #fefefe !important;
      font-size: 14px !important;
      font-weight: $font-w-light;
    }
  }