I'm using angular 4 and I'm using Angular Material.
<md-tab-group [disableRipple]=true>
<md-tab label="Tab 1"></md-tab>
<md-tab label="Tab 2"></md-tab>
</md-tab-group>
How can I fully customize the background color when (not-selected / selected), text color, and etc. I've already tried using pseudo classes...but still no avail. --- I have set the font-size
successfully but the text color is a little bit jittery when set. Please help.
Update:
I've tried to change the background to transparent when selected...trying to override the color when the link is not selected in the tab and etc..but still doesn't work.
/* 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;
}
In your component, set ViewEncapsulation to None
and add the styles in your component.css file.
Changes in Typescript code:
import {Component, ViewEncapsulation} from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
})
Component 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;
}
Demo
To customize tab background and ink bar, you can define your own theme then use the theme options on the tab group:
<div class="my-theme">
<mat-tab-group [backgroundColor]="'primary'" [color]="'warn'">
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
</div>
Here is an example on StackBlitz.
If you don't want to touch ViewEncapsulation, use ::ng-deep instead with class selector (inspect by browser dev tool).
For example (Angular 5, Material 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;
}
Latest Solution:-
1)Override in styles.css 2) Use selector of component of where that material-tab exists
app-child .mat-tab-label.mat-tab-label-active {
padding: 0px 15px ;
justify-content: flex-start;
}
app-child .mat-tab-label{
padding: 0px 15px ;
justify-content: flex-start;
}
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
background:#6168e7;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With