Angular Material: Как применить пользовательскую тематическую типографику к классу CSS вне файла темы?

Question

У меня есть пользовательский файл темы, который я импортирую в свой основной style файл.В другом месте моего приложения я инкапсулировал компонент scss.Внутри этих файлов scss я делаю что-то вроде:

.heading-thing { @include mat-typography-level-to-styles($config, subheading-2); }

Проблема здесь в том, что $config определено в моем файле темы, и я не знаю, как получить к нему доступ.То, что я действительно хочу, это миксин, который делает что-то вроде

.heading-thing { @include mat-typography-apply-theme-style(subheading-2); }

Правильный ли способ сделать это, чтобы использовать @extend .mat-subheading-2;?Или есть лучший способ с миксином?

Answer 1

Существует простой способ получить конфигурацию, которая является читом, и есть «правильный» способ.

Простой способ - просто создать его:

@import '~@angular/material/theming';
$config: mat-typography-config();

Это описано здесь .Если вы настроили типографику, это не сработает.Но вы можете создать свою собственную функцию для возврата вашей пользовательской конфигурации.

«Правильный» способ - это реализовать настройку типографики так же, как вы реализуете тематическая настройка .Создайте миксин, который применяет стиль оформления, и включите этот миксин в файл темы для своего компонента.Что-то вроде:

src / app / components / my-component / _my-component-theme.scss

@mixin my-component-typography($config) {

  .heading-thing {
    @include mat-typography-level-to-styles($config, subheading-2);
  }
}

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

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

/* TI gui theming and typography mixins and globals */
@import 'src/app/components/my-component/my-component-theme';

$config: mat-typography-config(); // or customize
@include angular-material-typography($config);

/* TI GUI core style */
@include my-component-typography($ti-material-typography);

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

Это то, что делает Angular Material, и, как вы, вероятно, видите, оно отражаеткак настроена тема.См. Их код здесь .

Что касается «раздувания», помните, что SASS компилируется до CSS, и компилятор должен отбрасывать все неиспользуемые.