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;的方法是否正确？还是使用mixin有更好的方法？

Answer 1

有一种简单的方法来获取欺骗的配置，并且有一种“正确”的方法。

简单的方法是简单地创建它：

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

已描述here。如果您已自定义字体，则将无法使用。但是您可以创建自己的函数以返回自定义配置。

“正确”的方法是与实现theming customization一样，实现字体自定义。创建一个应用字体样式的mixin，并将其包含在组件的主题文件中。像这样：

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调用，将版式配置传递到mixin：

@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的功能，您可能会看到它反映了如何定制主题。参见他们的代码here。

对于“膨胀”，请记住，SASS已编译为CSS，并且编译器应丢弃所有未使用的东西。

角材料：如何将自定义主题排版应用于主题文件之外的CSS类？

1 个答案: