angular - 覆盖 Angular Material 主体排版

Question

我在 Angular (v 5.2.0) 应用程序中使用 Angular Material (v 5.2.4) 创建了一个自定义主题。

我的主题.scss:

@import '~@angular/material/theming';

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,500');

@include mat-core();

$my-theme-primary: mat-palette($mat-deep-orange);
$my-theme-accent:  mat-palette($mat-amber, A200, A100, A400);
$my-theme:   mat-light-theme($my-theme-primary, $my-theme-accent);
$my-typography: mat-typography-config(
  $font-family: '"IBM Plex Sans Condensed"'
);

.my-theme {
  @include angular-material-theme($my-theme);
  @include angular-material-typography($my-typography);
}

我还添加了类名 mat-app-background mat-typography到 body在我的应用程序的 index.html 页面中。

当我添加 my-theme类到我的应用程序的容器(在 body 内)，然后是所有 Material 组件 做 获取自定义字体(用于单选按钮标签等)，但组件之外的任何内容都无法获取。

我也试过使用 angular-material-typography()和 mat-base-typography()混入无济于事。

如何覆盖 mat-typography 中的字体类(class)？

Answer 1

    @import '~@angular/material/theming';
    @import './color_palette.scss'; // contains custom palette
    @import './app_theme.scss'; // contains app mixin

   $app-typography: mat-typography-config(
      $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
      $display-4:     mat-typography-level(112px, 112px, 300),
      $display-3:     mat-typography-level(56px, 56px, 400),
      $display-2:     mat-typography-level(45px, 48px, 400),
      $display-1:     mat-typography-level(34px, 40px, 400),
      $headline:      mat-typography-level(24px, 32px, 400),
      $title:         mat-typography-level(20px, 32px, 500),
      $subheading-2:  mat-typography-level(16px, 28px, 400),
      $subheading-1:  mat-typography-level(15px, 24px, 400),
      $body-2:        mat-typography-level(14px, 24px, 500),
      $body-1:        mat-typography-level(14px, 20px, 400),
      $caption:       mat-typography-level(12px, 20px, 400),
      $button:        mat-typography-level(14px, 14px, 500),
        // Line-height must be unit-less fraction of the font-size.
      $input:         mat-typography-level(16px, 1.25, 400)
    );

    @include mat-core($app-typography);

    $primary: mat-palette($deeppurple); // $deeppurple form color_palette
    $accent:  mat-palette($blue);  // $blue form color_palette
    $warn:    mat-palette($red);  // $red form color_palette
    $theme:   mat-light-theme($primary, $accent, $warn);
    @include  app-theme($theme);  //app mixin from app_theme

    body, html {
      margin: 0;
      height: 100%;
      font-size: mat-font-size($app-typography, body-1);
      font-family: mat-font-family($app-typography);
      line-height: mat-line-height($app-typography, body-1);
    }