Angular Material自定义主题中无法在自定义组件获取排版样式

1. 排版级别定义的CSS变量使用问题 #

你在$headline-6中直接用$font-size: --fontSizeMedium作为CSS自定义属性，但Angular Material的mat.define-typography-level是Sass函数，无法直接解析未预定义的CSS变量为有效样式值，这会导致后续排版配置无法正确传递到自定义组件中。

修正方案：
先在全局作用域定义该CSS变量，再在排版级别中用var()包裹引用：

// 在全局样式文件（如styles.scss）中定义CSS变量
:root {
  --fontSizeMedium: 1.25rem;
}

// 重新定义排版级别
$headline-6: mat.define-typography-level(
  $font-family: 'Marianne Regular',
  $font-weight: 400,
  $font-size: var(--fontSizeMedium),
);

2. 自定义组件Typography Mixin未完整应用排版样式 #

当前你的typography mixin仅设置了font-family，没有应用自定义排版级别包含的font-size、font-weight、line-height等完整样式。应该使用Angular Material提供的mat.typography-level函数直接应用整个级别的样式。

修正方案：
修改typography mixin，根据需求关联对应的排版级别：

@mixin typography($theme) {
  $typography-config: mat.get-typography-config($theme);

  .railway_container {
    h2 {
      // 应用headline-6的完整排版样式
      @include mat.typography-level($typography-config, headline-6);
    }

    h3 {
      // 可根据需求替换为其他级别，如subtitle-1
      @include mat.typography-level($typography-config, subtitle-1);
    }
  }
}

3. 其他注意事项 #

• 修正主题定义中的笔误：warm: $lighy-warm改为warm: $light-warm，避免颜色配置异常。
• 确保@include railway.theme($light-theme);在全局样式文件（如styles.scss）中调用，避免样式作用域不足导致的覆盖问题。
• 可通过浏览器开发者工具检查自定义组件元素的样式，确认排版属性是否被正确注入。

完整修正后的Mixin示例 #

@use '@angular/material' as mat;

@mixin color($theme) {
  $color-config: mat.get-color-config($theme);
  $primary-palette: map.get($color-config, 'primary');

  app-railway {
    color: mat.get-color-from-palette($primary-palette, 500);
  }
}

@mixin typography($theme) {
  $typography-config: mat.get-typography-config($theme);

  .railway_container {
    h2 {
      @include mat.typography-level($typography-config, headline-6);
    }

    h3 {
      @include mat.typography-level($typography-config, subtitle-1);
    }
  }
}

@mixin theme($theme) {
  $color-config: mat.get-color-config($theme);
  @if $color-config != null {
    @include color($theme);
  }

  $typography-config: mat.get-typography-config($theme);
  @if $typography-config != null {
    @include typography($theme);
  }
}

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