角度自定义主题不会更改排版

Question

我正在使用Angular 15.2.0编写前端andAngular Material 15.2.6.

我想定义一个使用这些调色板的主题:

• 主:靛蓝
• 二级:绿色
• 警告:红色

并且使用Noto Sans代替Roboto作为font-family。

我写了这个theme.scss文件并将其导入到我的styles.scss文件中:

@use '@angular/material' as mat;
@include mat.core();
// Define custom theme colors
$my-palette-primary: mat.define-palette(mat.$indigo-palette);
$my-palette-accent: mat.define-palette(mat.$green-palette);
$my-palette-warn: mat.define-palette(mat.$red-palette);
// Override default typography
$my-typography: mat.define-typography-config(
$font-family: 'Noto Sans, sans-serif',
);
// Create custom theme using the defined colors
$my-theme: mat.define-light-theme((
color: (
primary: $my-palette-primary,
accent: $my-palette-accent,
warn: $my-palette-warn,
),
typography: $my-typography,
));
// Include custom theme in app
@include mat.all-component-themes($my-theme);

我也相应地改变了index.html中的字体链接:

<link 
href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500&display=swap"
rel="stylesheet">

然而，根据浏览器检查器，.mat-typography类仍然来自indigo-pink.scss，并设置了CSS规则font-family: Roboto, sans-serif。由于该字体不再加载，它将恢复为Arial。

我在这里犯了什么错误?

Answer 1

您可能在某处导入了indigo-pink.scss。in:

• 您的scss文件之一
• 您的angular.json配置