How to set the style of active tab?
I tried using this, but it doesn't work for me:
::ng-deep mat-tab-label-active{
background-color: red;
}
-
Does this answer your question? Angular Material customize tabAhmad Alkaf– Ahmad Alkaf2022-06-24 19:37:13 +00:00Commented Jun 24, 2022 at 19:37
Add a comment
|
4 Answers
you probably forgot the ., try .mat-tab-label-active.
if this doesn't work perhaps try to force it with !important.
not sure if you need the ::ng-deep
If you try to set any color for angular mat components in your own components' scss this will fail always. Because all the angular mat components colors, like their color for warn, primary, etc. are set with !important.
To be able to override them either use !important: (in your own component's scss)
.mat-tab-label-active {
background-color: red !important;
}
Or set the color in the global styles.scss:
.mat-tab-label-active {
background-color: red;
//does not require "!important"
}
The global styles scss has a higher priority than the color !important interior set in the angular mat component, therefore you don't need to add !important.
Comments
We shouldn't be using ng-deep it is part of the deprecated shadow-piercing descendant combinator which will be removed from major browsers.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
You should be able to just refer to .mat-tab-label-active .myCustomClass. However you will probably need to also ensure that view encapsulation is set to none.
Comments
What DrNio said is probably right, but this answer should also help: https://stackoverflow.com/a/45941592/7653320
It tells you to set encapsulation: ViewEncapsulation.None in the Component and then you are able to style the tabs without ::ng-deep.
