角度材料排版的不透明度

我可以通过以下方式使用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指定的排版级别的不透明度(对比度)？

解决方法

我所知道的,

@include mat-typography-level-to-styles($typography-config,'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.

官方文档不是很好,如果上述方法都不奏效,那么您自己为opacity属性赋值的方式要好得多.让我知道它是否有效,因为这是未经测试的方法,但上述解决方案基于文档.