I've recently started using the new way of styling angular components and I think I'm still misunderstanding something. I do manage to override styles here and then, but sometimes it just doesn't work and I can't figure out why. Here's an override for example, that worked perfectly fine: in my styles.scss :root{ @include mat.select-overrides(( trigger-text-size: 14px )); } This perfectly does its job for all mat-selects. The following one isn't working: :root{ @include mat.tabs-overrides(( background-color: red, )); } It does set the background color here: But when I look at computed variables and search where background color gets set, it's here: Even when unchecking the "background: none", my red background override doesn't affect anything. I've also tried just overriding with all the other tokens listed in the official docs for mat tabs: https://material.angular.dev/components/tabs/styling I am currently applying a theme to my components in this way (here I'm also not 100% sure if that best practice, but it works for now): $frontend-theme: mat.m2-define-light-theme(( color: ( primary: $frontend-primary, accent: $frontend-accent, warn: $frontend-warn ), typography: mat.m2-define-typography-config(), density: 0 )); @include mat.all-component-themes($frontend-theme) Tried removing the mat.all-component-themes($frontend-theme) in case this was overriding my override of mat-tabs, but that's not the case. Continue reading...
