cssangularsassangular-materialmat-tab

Angular Material 19 mixins override for mat-tab not working


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:

background color

But when I look at computed variables and search where background color gets set, it's here:

computed background color

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.


Solution

  • 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);
      }
    }
    

    Stackblitz Demo