2017-12-12 20 views
0

Ich triyng, um die Hintergrundfarbe der aktiven Registerkarten in Angular Material zu überschreiben. Ich habe dieses post versucht, aber mit keinem Erfolg. Inspizieren Chrom sehe ich diese Werte:Hintergrundfarbe in aktiven Registern überschreiben Eckiges Material

.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { 
    background-color: rgba(241, 204, 206, 0.3); 
} 

Abhaken ich den gewünschten Effekt, aber wenn ich es in meinem Stylesheet einfügen, geschieht nichts. Irgendwelche Ideen?

EDIT: die volle CSS

.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { 
    background-color: rgba(241, 204, 206, 0.3); 
} 
<style>…</style> 
.mat-tab-label:focus { 
    outline: 0; 
    opacity: 1; 
} 
<style>…</style> 
.mat-tab-label:focus { 
    outline: 0; 
    opacity: 1; 
} 
<style>…</style> 
.mat-tab-label { 
    height: 48px; 
    padding: 0 24px; 
    cursor: pointer; 
    box-sizing: border-box; 
    opacity: .6; 
    min-width: 160px; 
    text-align: center; 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
    white-space: nowrap; 
    position: relative; 
} 
<style>…</style> 
.mat-tab-label { 
    height: 48px; 
    padding: 0 24px; 
    cursor: pointer; 
    box-sizing: border-box; 
    opacity: .6; 
    min-width: 160px; 
    text-align: center; 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
    white-space: nowrap; 
    position: relative; 
} 
<style>…</style> 
.mat-tab-label, .mat-tab-link { 
    color: rgba(0, 0, 0, 0.87); 
} 
<style>…</style> 
.mat-ripple { 
    overflow: hidden; 
} 
<style>…</style> 
.mat-tab-label, .mat-tab-link { 
    font-family: Roboto, "Helvetica Neue", sans-serif; 
    font-size: 14px; 
    font-weight: 500; 
} 
user agent stylesheet 
:focus { 
    outline: -webkit-focus-ring-color auto 5px; 
} 
user agent stylesheet 
div { 
    display: block; 
} 
Inherited from mat-tab-group.mat-tab-group.mat-primary.mat-background-black 
<style>…</style> 
.mat-tab-group { 
    font-family: Roboto, "Helvetica Neue", sans-serif; 
} 
Inherited from mat-card.login-card.mat-card 
<style>…</style> 
.mat-card { 
    background: white; 
    color: rgba(0, 0, 0, 0.87); 
} 
<style>…</style> 
.mat-card { 
    font-family: Roboto, "Helvetica Neue", sans-serif; 
} 

Antwort

0

versuchen, mehr Spezifität auf Ihre Selektoren hinzufügen.

Zum Beispiel:

body .mat-tab-group.mat-primary .mat-tab-label:focus, body .mat-tab-group.mat-primary .mat-tab-link:focus, body .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, body .mat-tab-nav-bar.mat-primary .mat-tab-link:focus { 
    background-color: rgba(241, 204, 206, 0.3); 
} 

Beachten Sie, dass diese mit Fokus nur für Registerkarten ist, für den Ausgangszustand Verwendung dieses:

body .mat-tab-group.mat-primary .mat-tab-label, body .mat-tab-group.mat-primary .mat-tab-link, body .mat-tab-nav-bar.mat-primary .mat-tab-label, body .mat-tab-nav-bar.mat-primary .mat-tab-link { 
    background-color: rgba(241, 204, 206, 0.3); 
} 
+0

danke für die Antwort @Alex, aber es funktioniert nicht, habe ich beide versucht (mit! Wichtig) – Mellville

+0

Verwenden Sie nicht wichtig, können Sie alle CSS aus dev Tools kopieren? – Alex

+0

gerade aktualisiert die Antwort @Alex, danke – Mellville

1

dieses CSS versuchen, es funktioniert auf Element untersuchen:

md-tabs .md-tab.md-active { 
    background-color: #000; 
    color: #fff; 
} 

EDIT: Für Angular 2+ Material:

.mat-tab-label-active { 
    background-color: #000; 
    color: #fff; 
    opacity: 1; 
} 
+0

nein, das einzige, was funktioniert, ist das Deaktivieren der Schaltfläche .. – Mellville

+0

Err ... Sie beziehen sich AngularJS Material, während das OP Angular Material 2/5 will. – Edric

+0

@Edric editierte Antwort jetzt, danke – kastriotcunaku