角度材料排版的不透明度

Question

我可以通过以下方式使用Angular Material的排版样式:

.title {
  @include mat-typography-level-to-styles($typography-config, 'caption');
}

.title-with-opacity {
  @include mat-typography-level-to-styles($typography-config, 'caption');
  opacity: 0.54;
}

应用时,它看起来像这样:

但是,对比度不会自动应用于所使用的排版级别.

问:如何在不指定材质设计规格的情况下获得排版级别的不透明度(对比度)？

Answer 1

据我所知，

@include mat-typography-level-to-styles($typography-config, 'caption');

它将包括默认配置中的级别标题的排版样式，其中包含：

“字体系列（默认系列）”，“字体大小（默认大小）”，“字体粗细（默认粗细）”，“行高（默认高度）”，“字母间距（默认为空）”但不是不透明度/对比。

因此，您将无法获得对比度，但您可以使用自定义配置，例如：

    $custom-typography: mat-typography-config(
      $font-family: 'Roboto, monospace',
      // other default overrides
      $color: mat-color($primary, lighter-contrast)
    );

//include custom config like this
@include mat-typography-level-to-styles($custom-typography);

其他方式：

.title-with-opacity {
  @include mat-typography-level-to-styles($typography-config, 'caption');
  color: mat-color($primary, lighter-contrast);
}

注意：必须包含所需的文件。

官方文档不太好，如果上述方法都不起作用，那么您自己为不透明度属性赋值的方法要好得多。让我知道它是否有效，因为这是未经测试的方法，但上面的解决方案基于文档。