Wie style eine bestimmte eckige Materialkomponente?

Question

Ich benutze eckiges Material 2, aber ich denke, das gilt auch für eckiges Material 1.

Nehmen wir an, ich möchte die eckigen Materialregister verwenden, aber ich möchte die Registerkarten ausblenden oder ein bestimmtes Styling hinzufügen .

So habe ich die folgende html/Winkelmaterialcode:

<md-tab-group> 
    <md-tab> 
     <template md-tab-label> <--- I want to style or hide all these. e.g. "height: 0" 
      Some tab 
     </template> 
     <template md-tab-content> 
      Some content. Perhaps other tab components. 
     </template> 
    </md-tab> 
    <md-tab> 
     <template md-tab-label> <--- I want to style or hide all these. e.g. "height: 0" 
      Some tab 
     </template> 
     <template md-tab-content> 
      Some content. Perhaps other tab components. 
     </template> 
    </md-tab> 
</md-tab-group> 

Wenn ich eine Klasse der "Vorlage md-tab-label" hinzufügen -tag es nicht überall in der DOM-Struktur hinzugefügt wird. Ich kann nicht einfach die "md-tab-label" -Klasse stylen, denn das würde den Stil überall und auf alle Registerkarten anwenden. Wenn ich es von einem übergeordneten Element aus betrachte, würde es für alle verschachtelten Tab-Komponenten gelten, die möglicherweise im Tab-Inhalt vorhanden sind. Wenn ich versuche, die Tiefe zu begrenzen und eine wirklich wirklich spezifische Auswahl basierend auf der endgültigen DOM-Repräsentation zu erstellen, würde ich einen Stil auf eine Struktur anwenden, auf die ich keine Kontrolle habe und die sich bei jeder Aktualisierung ändern könnte.

Gibt es einen richtigen Weg, oder muss ich nur einen Selektor durch Dekonstruktion der DOM-Struktur erstellen?

Answer 1

Sie können das Materialstyling von Ihrem scss/css überschreiben. Wie folgt aus:

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

Aufgrund Ansicht Verkapselung, müssen Sie /deep/ Selektor verwenden, die Sie halten die Materialklasse erhalten können hinzugefügt werden, wenn die Komponente wiedergegeben wird.