Wie fügt man CSS zur Angular Materials Komponente hinzu?

Question

Ich habe eine Web-App mit eckigen 2 und eckigen Materialien. Ich benutze ein einfaches modal:

<h1 md-dialog-title *ngIf="data">{{data.title}}</h1> 
    <div md-dialog-content>What would you like to do?</div> 
    <div md-dialog-actions></div> 

Aber wenn ich die App die Modal-Höhe ist 100%. Wenn ich mit Chrome-Dev-Tools inspiziere, sieht es so aus, als ob Angular Materials/Angular 2 einige Klassen enthält, die den MD-Dialog-Inhalt umschließen. Hier ist ein Überblick:

Anyways, hat jemand irgendwelche Vorschläge haben, wie man das Verhalten außer Kraft zu setzen, damit ich manuell die Größe beeinflussen können? Vielen Dank.

Answer 1

Haben Sie versucht, den Dialog mit der gewünschten Höhe zu öffnen? wie:

let dialogRef = dialog.open(UserProfileComponent, { 
    height: '400px', 
    width: '600px', 
}); 

Eine weitere Möglichkeit, benutzerdefinierte Stile zu erzwingen, besteht darin, das Design selbst anzupassen. Sie können sich die Anleitung here ansehen.

Answer 2

Sie können das Materialstyling von Ihrem scss/css überschreiben. Aber wegen der Einkapselung der Ansicht müssen Sie /deep/ Selektor verwenden, mit dem Sie die hinzugefügte Materialklasse erhalten können, wenn die Komponente gerendert wird. Zum Beispiel:

/deep/ .mat-tab-group.mat-primary .mat-ink-bar{ 
    background-color: red; 
}