Wie Anpassen der Hintergrundfarbe von Tabs mit Angular 2+ Direktiven?

Question

Ich versuche, für jeden von meinen Registerkarte Etikett unterschiedliche Herkunft zu setzen, die in einer "md-tab-Gruppe sind wie folgt:

`<md-tab-group class="full-width"> 
     <md-tab> 
     <ng-template md-tab-label> 
      <md-icon class="em-tab-icons">directions_boat</md-icon> 
     </ng-template> 
     <p>Slings</p> 
    </md-tab> 

    <md-tab> 
     <ng-template md-tab-label> 
      <md-icon class="em-tab-icons">local_gas_station</md-icon> 
     </ng-template> 

     <p>Fuels</p> 
    </md-tab> 

    <md-tab> 
     <ng-template md-tab-label> 
      <md-icon class="em-tab-icons">restaurant_menu</md-icon> 
     </ng-template> 
     <p>Consumables</p> 
    </md-tab> 
</md-tab-group>` 

ich weiß, dass‚md-tab-label‘ist Eine Direktive, als ich weiß, dass ich keine "ID" setzen oder eine Klasse festlegen kann, um einige Attribute zu überschreiben.

Ich habe die von Material Design verwendeten Klassen überprüft und die Klasse 'Mat-Tab-Labels' gefunden. Also habe ich versucht, diese auf meinem SCSS zu tun:

` .mat-tab-labels:first-child { 
    background-color: #E1E8F5; 
    } 
    .mat-tab-labels:nth-child(2) { 
    background-color: #FFD9B9; 
    } 
    .mat-tab-labels:nth-child(3) { 
    background-color: #E6D2C8; 
    }` 

aber es hat nicht funktioniert. Natürlich, wenn ich so etwas wie folgt verwenden:

` #md-tab-label-0-0{ 
    background-color: #E1E8F5 !important; 
    } 
    #md-tab-label-0-1{ 
    background-color: #FFD9B9 !important; 
    } 
    #md-tab-label-0-2{ 
    background-color: #E6D2C8 !important; 
    }` 

und es funktioniert, aber nur das erste Mal, dass ich die Seite eingeben, als die IDs ändern.

Also, irgendwelche Ideen? Muss ich dafür nur eine Richtlinie erstellen?

Answer 1

Ihre .scss zielt auf den übergeordneten Container div .mat-tab-labels, der wahrscheinlich nicht über mehrere Knoten verfügt. Was ich denke, dass Sie zielen müssen, ist jeder .mat-tab-label Knoten in diesem übergeordneten Container.

Wenn Sie Ihre .scss Datei aktualisieren die folgenden dann bedingte Farben sollten arbeiten lassen:

` 
    .mat-tab-label:nth-child(1) { 
    background-color: #E1E8F5; 
    } 
    .mat-tab-label:nth-child(2) { 
    background-color: #FFD9B9; 
    } 
    .mat-tab-label:nth-child(3) { 
    background-color: #E6D2C8; 
    } 
`