Angular Material Typography не установлен правильно

Это может произойти по нескольким причинам, связанным с порядком файлов sass, а также с вызываемыми ими функциями:

Причина:

Причина, по которой это происходит, связана с порядком вызова миксинов sass файлом _theming.scss Angular Material, который можно найти по адресу node_modules\@angular\material\_theming.scss.

Беда миксинов mat-core, а также angular-material-typography.

Использование темы:

Когда вы создаете тему и вызываете миксин темы Angular Material mat-core, он включает в себя ряд миксинов.

@mixin mat-core($typography-config: null) {
  @include angular-material-typography($typography-config);
  @include mat-ripple();
  @include cdk-a11y();
  @include cdk-overlay();
  @include cdk-text-field();
}

Как вы можете видеть в приведенном выше фрагменте кода, миксин действительно вызывается. Когда вызывается angular-material-typography, он ищет конфигурацию типографики, если она не указана, она будет использовать конфигурацию по умолчанию.

Использование типографики:

Когда вы используете только типографический файл, обычно можно увидеть что-то вроде следующего:

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

$typography-configuration: mat-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
  $display-4: mat-typography-level(112px, 112px, 300),
  $display-3: mat-typography-level(100px, 56px, 400),
  $display-2: mat-typography-level(100px, 48px, 400),
  $display-1: mat-typography-level(100px, 34px, 400),
  $headline: mat-typography-level(100px, 32px, 400),
  $title: mat-typography-level(100px, 32px, 500),
  $subheading-2: mat-typography-level(100px, 28px, 400),
  $subheading-1: mat-typography-level(100px, 24px, 400),
  $body-2: mat-typography-level(100px, 24px, 500),
  $body-1: mat-typography-level(100px, 22px, 400),
  $caption: mat-typography-level(100px, 22px, 400),
  $button: mat-typography-level(100px, 14px, 500),
  $input: mat-typography-level(100px, 1.125, 400)
);

@include angular-material-typography($typography-configuration);

Как видно из приведенного выше фрагмента кода, мы создали конфигурацию типографики. А также мы называем тематический миксин Angular Material mat-core. Это установит типографику для вас, но если вы используете как тему Angular Material Theme, так и типографику Angular Material Typography, у вас могут быть случаи, когда ваша типографика переопределяется. Вот где порядок - проблема.

Неправильная реализация, вызывающая вашу проблему:

@import './_theme-master.scss';
@import './theme-typography';
@include mat-core();

Например выше: скажем, в ваш файл typography-configuration вы импортируете файл темы, содержащий настройку палитры тем и вызов styles.scss. После этого вы решаете импортировать файл типографики. Ваш типографический файл имеет типографическую конфигурацию, а также вы вызываете @include angular-material-theme($theme); передачу своей конфигурации.

Теперь, когда это сделано, вы решили вызвать своему @include angular-material-typography($typography-configuration);. В это время ваши стили созданы для вашей типографики, и вы счастливы, однако, при вызове mat-core Angular создает другой набор стилей, используя конфигурации типографики по умолчанию. Теперь это новейшие стили, и поэтому ваши стили переопределяются новейшими созданными стилями.

По сути, ваши вызывающие миксины выглядят так:

@include angular-material-typography($typography-configuration);
@include mat-core();

Чтобы устранить проблему:

Вместо этого загрузите конфигурацию типографики следующим образом:

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

Теперь о проблеме создания множества стилей типографики, переопределяющих друг друга. Скорее всего, это связано с тем, что файл (вероятно, ваш файл, содержащий вашу типографику) импортируется несколько раз, что приводит к тому, что миксин вызывает несколько раз. Попробуйте разместить файл типографики в 1 центральном месте, например, вызывая файл один раз в mat-core