Angular Material v15 でFont style を適用する追加設定

対象バージョン

"@angular/core": "15.1.0",
"@angular/material": "15.1.0",

v15 で Font style が適用されない

v14 まではng add 時にSet up global Angular Material typography styles? と聞かれて yes と答えると、特定のタグやクラスのついた要素には Material Design の Font style が適用されていました。しかし、v15 に上がってから現在の v15.1.0 まで、追加で sass の関数を呼ばないと Font style が適用されなくなっています。こちらはissue として報告されていますが、現時点で Angular Team からの回答がなく、バグなのか仕様なのか分かっていません。ただ v15 に上がる際に更新された公式ドキュメントにこのような記載はないので、個人的にはバグの可能性が高いと考えています。

下記のように設定すると v14 以前のように Font style が適用されます。

style.scss

$app-theme: mat.define-light-theme(
  (
    color: (
      primary: $app-primary,
      accent: $app-accent,
      warn: $app-warn,
    ),
+   typography: mat.define-typography-config(),
  )
);

@include mat.all-component-themes($app-theme);
+ @include mat.typography-hierarchy($app-theme);

v14 からの update は Font style が適用される

v14 から update した場合 style.scss で呼ばれている関数が上記の mat.all-component-themes ではなく mat.all-legacy-component-themes になっているはずです。こちらのlegacy 付きの関数が呼ばれている場合は Font style が適用されます。近々legacy を外す予定のある方は、上記の追加設定が必要になりますのでご注意ください。