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 seem to 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.
I raised a github issue to get the official explanation for None
in system tokens.
docs-bug(COMPONENT): What does it mean when system token is None in overrides (styling tab) #31129
In the meantime, we have to provide the custom CSS ourselves, as a temporary workaround to this issue.
:root {
@include mat.tabs-overrides(
(
background-color: red,
)
);
.mat-mdc-tab {
background: var(--mat-tab-header-with-background-background-color);
}
}