Угловая типография материала установлена ​​неправильно

Question

Я пытаюсь внедрить Angular Material Typography, однако у меня возникли некоторые трудности, и я не уверен, в чем может быть проблема.

Я следовал инструкциям Angular здесь , однако столкнулся с проблемой. Проблема в том, что похоже, что все в приложении затронуто, но некоторые переопределяются с типографикой по умолчанию, и я не уверен, что делаю неправильно.

Типография создана и используется

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

Как вы можете видеть для типографики, я специально установил первый параметр (размер шрифта) на 100px, чтобы я мог видеть, все ли в приложении выполнено.

Пример # 1: Кнопка материала

Для кнопок Angular Material (используя 'mat-button' на html element 'button') я вижу то, что ожидал, как показано ниже. Текст устанавливается на 100 пикселей.

Пример # 2: Панель инструментов

Однако для панели инструментов Mat я не вижу размер шрифта, установленный на 100px. Мне кажется, что размер шрифта по умолчанию, как показано ниже, переопределяет размер 100px:

Пример # 3: другая панель инструментов с множественным переопределением

В последнем примере на другой панели инструментов мы можем видеть, что 100px добавляется несколько раз, переопределяя друг друга каждый раз, пока последний переопределяющий также не будет 20px, поэтому размер шрифта не будет 100px.

подробности:

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

// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-typography);

// Override typography for a specific Angular Material components.
@include mat-checkbox-typography($custom-typography);

// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography);

Насколько я понимаю, третий вариант, который я использовал, должен применяться ко всему, под чем вы используете class="mat-typography". Поэтому я добавил это в body приложения, а также попробовал на app-root. Однако, как мы видим выше, только некоторые из приложений затронуты правильно

Я пытался добавить его к более мелким частям внутри приложения в компонентах, но результат в итоге тот же.

Я не уверен, что мое понимание неверно, и я не использую его правильно или если есть проблема где-то еще, я предполагаю, что я использую это неправильно, однако я не могу найти какие-либо учебники и примеры, созданные другими удивительно.

Я попытался сам добавить классы к таким элементам, как class="mat-display-1", что, кажется, работает нормально, однако это не кажется хорошим решением, если мне приходится применять его повсюду в приложении.

Я хотел бы, если возможно, применить его ко всему приложению, не устанавливая сотни классов только для типографии.

Я знаю, что могу сделать то, что предлагается здесь для применения к моим собственным элементам в sass, однако я думаю, что они делают это сами.

Answer 1

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

Причина:

Причины, по которым это происходит, связаны с порядком вызова sass mixins в файле _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 действительно вызывается mixin. Когда вызывается mat-core, он ищет конфигурацию типографии, если ничего не указано, будет использоваться конфигурация по умолчанию.

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

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

@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 typography-configuration. Это будет и будет определять типографику для вас, однако, если вы используете как тему углового материала, так и типографию углового материала, у вас могут быть случаи, когда ваша типографика переопределяется. Здесь проблема в заказе.

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

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

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

Теперь, после того, как это сделано, вы решили позвонить своему mat-core. В настоящее время ваши стили создаются для вашей типографии, и вы счастливы, однако, при вызове mat-core Angular создает другой набор стилей, используя стандартные настройки типографии. Теперь это новейшие стили, и поэтому ваши стили переопределяются с созданными новейшими.

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

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

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

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

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

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