Angular Material 19 styling

Question

I am trying to style a form field from angular material 19 using form-field-overrides mixin (https://material.angular.io/components/form-field/styling), but no tokens seem to work.

Note that I used button-overrides mixin and it works just fine:

@use "@angular/material" as mat;

@include mat.button-overrides(
 (
   filled-container-color: green,
 )
);

But this doesn't work:

@use "@angular/material" as mat;

@include mat.form-field-overrides(
  (
    filled-caret-color: orange,
    filled-focus-active-indicator-color: red,
    outlined-caret-color: orange,
    container-height: 2,
  )
);

Answer 1

I figured it out. The @include mat... must be wrapped inside a selector in order to work.

@use "@angular/material" as mat;

:host {
  @include mat.form-field-overrides(
    (
      filled-caret-color: orange,
      filled-focus-active-indicator-color: red,
      outlined-caret-color: orange,
      container-height: 2,
    )
  );
}

or

@use "@angular/material" as mat;

mat-form-field{
  @include mat.form-field-overrides(
    (
      filled-caret-color: orange,
      filled-focus-active-indicator-color: red,
      outlined-caret-color: orange,
      container-height: 2,
    )
  );
}