如何让Angular Material排版自动应用Material Design规范的透明度？

Great question! The issue you're hitting is that the mat-typography-level-to-styles mixin only handles pure typography styles (font size, line height, font weight, letter spacing, etc.) from your configuration—it doesn't include the opacity/contrast values defined in the Material Design spec. Those transparency rules are tied to Angular Material's theming system, not just the typography system itself.

Here are a few straightforward ways to fix this without manually setting opacity every time:

1. Use Angular Material's Predefined Typography Classes (Easiest Fix) #

Angular Material ships with ready-to-use CSS classes for every typography level (like mat-caption, mat-body-1, etc.). These classes automatically combine the core typography styles with the correct opacity/color contrast defined by your theme.

Just replace your custom .title class with the built-in one in your template:

<p class="mat-caption">This text uses caption styling + proper Material Design opacity</p>

This works out of the box because the theme's foreground color palette includes pre-configured transparency values for each typography level (e.g., caption uses 54% opacity for light themes).

2. Create a Custom Mixin to Combine Typography + Color #

If you need to use custom class names (like your .title), you can build a reusable mixin that merges the typography styles with the theme's color/opacity rules:

@mixin mat-typography-with-contrast($typography-config, $level-name) {
  // Apply base typography styles
  @include mat-typography-level-to-styles($typography-config, $level-name);
  // Pull the pre-defined color/opacity from your theme's foreground palette
  color: mat-color($foreground, $level-name);
}

Then use it in your custom class:

.title {
  @include mat-typography-with-contrast($typography-config, 'caption');
}

This will apply both the caption typography styles and the correct opacity/contrast color from your theme, no manual opacity needed.

3. Verify Your Theme's Foreground Palette Configuration #

Make sure your Angular Material theme is properly set up with foreground color values for each typography level. If you're defining a custom theme, it should look something like this:

$my-primary: mat.define-palette(mat.$blue-palette);
$my-accent: mat.define-palette(mat.$pink-palette);
$my-warn: mat.define-palette(mat.$red-palette);

$my-foreground: (
  base: #000000,
  // Default Material Design opacity for caption text
  caption: rgba(0, 0, 0, 0.54),
  body-1: rgba(0, 0, 0, 0.87),
  // Add other levels as needed
);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn,
    foreground: $my-foreground,
  ),
  typography: $typography-config,
));

This ensures the mat-color($foreground, 'caption') call in your custom mixin pulls the correct transparency value.

内容的提问来源于stack exchange，提问作者kctang