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

Я пытаюсь внедрить 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, однако я думаю, что они делают это сами.

Источник

2 ответа

Решение

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

Причина:

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

Беда Миксин mat-core так же как angular-material-typography,

Используя тему:

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

@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 миксин действительно называется. когда mat-core вызывается is ищет типографскую конфигурацию, если ничего не указано, будет использоваться конфигурация по умолчанию.

Используя типографику:

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

@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

Источник

Для тех, кто придет после ngV14, вот что вам нужно сделать вместе с ответом @L1ghtk3ira:

Небольшая коррекция, как после ngV14.@include mat.core($typography);не будет работать, поэтому вам нужно убедиться, что это похоже на@include mat.core();этот.

Добавьте строку ниже после объявления темы.@include mat.typography-hierarchy($theme);

Они не обновили свою документацию, несмотря на это упоминание в разделе проблем GitHub. Вот вам ссылка: Страница проблемы на Github .

In v15 the typography hierarchy isn't included by default anymore. You have to add it yourself with @include mat.typography-hierarchy($theme);

Итак, вам нужно сделать что-то вроде этого:

      // Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$my-warn: mat.define-palette(mat.$red-palette);

$my-typography: mat.define-typography-config();


// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
  ),
  typography: $my-typography
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($my-theme);
@include mat.typography-hierarchy($my-theme);

Приятного кодирования :D

Источник
Другие вопросы по тегам