According to this answer
There is several ways to style Angular materials, but the ::ng-deep is not recommended anymore.
So the solutions seem to be custom themes, global styles with selectors to apply the style to Angular material, and also ViewEncapsulation. From what I understand, both of them will affect other Angular material components.
Is there any way I could apply styles only to a specific material component without affecting them globally?
More importantly, How would I know which selectors to use? In this case, mat-tab case The answer provided a selector to target the active tab underline specifically by
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{}
.mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-group.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:not(.mat-tab-disabled):focus{}
It works great, but how could I learn to find this kind of selector myself? I would always go to Angular material documentation and try to find any input or methods that match my styling needs. But I have really no idea if this method not working what else could I do other than googling and searching on StackOverflow.
Or at this point, should I just stop trying and try to recreate a similar component by myself? Usually this way is faster, because I really have no idea what to do.
