angular - Angular Material 排版的不透明度

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;
}

应用后，它看起来像这样:

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

问:如何获得 Material Design Specs 指定的排版级别的不透明度(对比度)不单独指定它们？

Answer 1

据我所知，

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

它将包括来自默认配置的 caption 级别的排版样式，其中包含:

"Font Family(deafult family)", "Font size (default size)", "Font Weight (default weight)", "Line height (default height)", "Letter Spacing (null by default)" but not the opacity/contrast.

因此，您不会得到对比，但您可以使用自定义配置，例如:

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

Note: Required files must be included.

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