角度材料排版的不透明度

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');

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

  

“字体系列（deafult系列）”，“字体大小（默认大小）”，“字体粗细（默认重量）”，“行   height（默认高度）“，”Letter Spacing（默认为null）“但不是不透明度/对比度。

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

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

  

注意：必须包含必填文件。

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