wake-up-neo.com

Angular Materialauswahl: So passen Sie das .mat-select-Panel selbst an

Ich habe diese Struktur von HTML mit Angular Material Select

<mat-form-field class="year-drpdwn-vacay-stock">
    <mat-select placeholder="Year">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let yr of year"  [value]="yr">{{yr}}</mat-option>
    </mat-select>
</mat-form-field>

Ich habe eine Klasse platziert, weil ich Select auch in anderen Komponenten verwende. Ich habe versucht, etwas hinzuzufügen 

::ng-deep .mat-select-panel {
    margin-top: 20%; 
}

in CSS zum Anpassen, aber das Problem ist, dass andere Komponenten, die ein anderes Auswahlfeld enthalten, ebenfalls betroffen sind (erbt das margin-top-CSS)

Momentan habe ich dieses CSS

.year-drpdwn-vacay-stock mat-select.mat-select :Host ::ng-deep .mat-select-panel {
    margin-top: 20%; 
}

Aber es funktioniert immer noch nicht. 

AKTUALISIEREN

Ziel: Ich möchte, dass sich das Optionsfeld beim Öffnen der Auswahlbox ein wenig nach unten bewegt, weshalb .mat-select-panel einen oberen Rand von 20% haben soll.

cssangularangular-materialmaterial-designangular-material2
3
Char

Verwenden Sie cdk-overlay-container als Basis und gehen Sie in den Optionsbereich wie folgt. Mat-select verwendet die absolute Position ohne untergeordnetes Element. Sie müssen also Ihren Stil auf cdk-overlay-container anwenden.

.cdk-overlay-container .cdk-overlay-pane{
   margin-top: 7%;
}

Hier ist die Demo

Bearbeiten:

Sie haben also ein Konfliktproblem mit anderen Elementen, die Sie hinzufügen können 

panelClass="testClass"

und 

<mat-select placeholder="Favorite food" panelClass="testClass">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

Und ändere deine Klasse so

.cdk-overlay-container .cdk-overlay-pane .testClass{
margin-top: 7%;
}

Demo

4
Just code
  1. Wenn Sie den Stil direkt in styles.css (root) mit einem!! - Tag anwenden, überschreibt er alle anderen Stile. Aber Sie werden die Kapselung brechen, indem Sie es tun.
  2. Wenn Sie Stile in der Komponente mit/deep/anwenden, wird der Stil überschrieben, mat-form-field/deep/(Klassenname) {} (Veraltete Ausgaben) Bitte lesen Sie https: //blog.angular -university.io/angular-Host-context/ für eine ausführliche Erklärung

  3. Aufgrund von Problemen mit dem Ablehnen können Sie tatsächlich versuchen, mit Vanilla-Javascript Klassen hinzuzufügen oder zu entfernen. Die direkte Manipulation von Dom ist jedoch eine schlechte Praxis.

    Zusammenfassung: Die Verwendung einer veralteten Syntax ist schlecht. Wenn Sie einen Stil auf der Stammebene anwenden, führt dies zu Problemen mit der Kapselung. Die direkte Manipulation von Dom ist eine schlechte Praxis. Sie können daher die von angle bereitgestellten Tools verwenden, um den Dom zu manipulieren, um die oben genannten Probleme zu beheben über bewährte Methoden zum Bearbeiten von dom in angle https://blog.angularindepth.com/exploring-angular-dom-abstractions-80b3ebcfc02

1
Akshay Rajput