覆盖角材料主体排版

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，所有的材质组件都将获得自定义字体（用于单选按钮标签等），但是组件之外的任何组件都无法获得它。

我也尝试过使用angular-material-typography()and mat-base-typography()mixins无济于事。

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

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

Answer 2

已接受的问题为我指明了正确的方向，这就是我最终让它发挥作用的方式，以供将来参考：

@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);

  // this is what fixed it
  .mat-typography & {
    font-size: mat-font-size($my-typography, body-1);
    font-family: mat-font-family($my-typography, body-1);
    line-height: mat-line-height($my-typography, body-1);

    h1, h2, h3 {
      font-family: mat-font-family($my-typography, body-1);
    }
  }
}