Angular Material Registerkarte anpassen

Question

Ich benutze eckig 4 ​​und ich verwende Angular Material (Angular 2 Material).

<md-tab-group [disableRipple]=true> 
     <md-tab label="Tab 1"></md-tab> 
     <md-tab label="Tab 2"></md-tab> 
    </md-tab-group> 

Wie kann ich voll und ganz die Hintergrundfarbe, wenn (nicht ausgewählt/ausgewählt), Textfarbe und etc. habe ich versucht, bereits die Pseudo-Klassen ... aber immer noch ohne Erfolg. --- Ich habe die Schriftgröße erfolgreich eingestellt, aber die Textfarbe ist ein wenig nervös, wenn sie gesetzt ist. Bitte helfen Sie.

Update: versuchte den Hintergrund transparent zu ändern, wenn gewählt ... versucht, die Farbe außer Kraft zu setzen, wenn die Verbindung nicht in der Registerkarte ausgewählt ist und etc..but noch nicht funktioniert.

/* Styles go here */ 
 

 
    .mat-tab-label{ 
 
    color:white; 
 
    min-width: 25px !important; 
 
    padding: 5px; 
 
     background-color:transparent; 
 
     color:white; 
 
     font-weight: 700; 
 
    } 
 

 
    /deep/ .mat-tab-label{ 
 
    min-width: 25px !important; 
 
    padding: 5px; 
 
     background-color:transparent; 
 
     color:white; 
 
     font-weight: 700; 
 
} 
 

 
.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple.md-active{ 
 
     background-color:transparent; 
 
     color:white; 
 
     font-weight: 700; 
 
    } 
 

 
.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple{ 
 
    background-color:transparent; 
 
    color:white; 
 
    font-weight: 700; 
 
} 
 

 

 

 
.mat-tab-label:active{ 
 
    min-width: 25px !important; 
 
    padding: 5px; 
 
     background-color:transparent; 
 
     color:white; 
 
     font-weight: 700; 
 
} 
 

 
.mat-tab-label:selected{ 
 
    min-width: 25px !important; 
 
    padding: 5px; 
 
     background-color:transparent; 
 
     color:white; 
 
     font-weight: 700; 
 
}

Answer 1

In Ihrer Komponente setzen ViewEncapsulation-None und die Stile in Ihrer component.css Datei hinzufügen.

Änderungen in Typoskript Code:

import {Component, ViewEncapsulation} from '@angular/core'; 

@Component({ 
    .... 
    encapsulation: ViewEncapsulation.None 
}) 

Komponente Arten css:

/* Styles for tab labels */ 
.mat-tab-label { 
    min-width: 25px !important; 
    padding: 5px; 
    background-color: transparent; 
    color: red; 
    font-weight: 700; 
} 

/* Styles for the active tab label */ 
.mat-tab-label.mat-tab-label-active { 
    min-width: 25px !important; 
    padding: 5px; 
    background-color: transparent; 
    color: red; 
    font-weight: 700; 
} 

/* Styles for the ink bar */ 
.mat-ink-bar { 
    background-color: green; 
} 

Link zu working demo

Answer 2

Wenn Sie nicht wollen, ViewEncapsulation berühren, zu verwenden: : ng-deep statt mit dem Klassenselektor (inspect by browser dev tool).

Zum Beispiel (Angular 5, Werkstoff 2):

/* active tab */ 
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active { 
color:red; 
background-color: green; 
} 

/* ink bar */ 
::ng-deep .mat-ink-bar { 
background-color: var(--primary-color,#1F89CE) !important; 
}