angular - 如何将字体排版到我的 Angular Material 主题中？

Question

我正在为我的 Angular 应用程序创建自定义主题。然后我尝试设置 bootstrap 的重启，为所有非物质元素设置一个基本起点。由于 reboot 使用了很多与 Material 重叠的变量，我把它变成了一个 mixin，我将我创建的主题传递给它，并在其中尝试提取所需的值(例如字体系列或颜色)。

主题.scss:

$wb-theme: mat.define-dark-theme((
  color: (
    primary: $wb-primary,
    accent: $wb-accent,
    warn: $wb-warn,
  )
));

@include mat.all-component-themes($wb-theme);
@include reboot.theme($wb-theme);

_reboot.scss

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

  $primary-palette: map.get($color-config, primary);

  body {
    font-family: mat.font-family($typography-config);
    color: mat.get-color-from-palette($primary-palette, 50);
  }
}

设置颜色工作正常，但字体系列行在 Angular _typography-utils.scss 中抛出异常，说明 SassError: $map: null is not a map. in line 46 │ $font-family: map.get($config, font-family);

我注意到 mat.get-typography-config($theme); 返回 null，因为显然我的主题不包含键 typography 而我确实不将默认值作为第二个参数传递。我测试了 map.has-key($theme, typography) 的返回值，它确实返回了 false。

@angular_theming.scss:

/// Gets the typography configuration from the given theme or configuration.
/// For backwards compatibility, typography is not included by default.
/// @param {Map} $theme-or-config  The theme map returned from `define-light-theme` or
///     `define-dark-theme`.
/// @param {Map} $default The default value returned if the given `$theme` does not include a
///     `typography` configuration.
/// @returns {Map} Typography configuration for a theme.
@function get-typography-config($theme-or-config, $default: null) {
  // If a configuration has been passed, return the config directly.
  @if not private-is-theme-object($theme-or-config) {
    @return $theme-or-config;
  }
  // In case a theme has been passed, extract the configuration if present,
  // or fall back to the default typography config.
  @if (map.has-key($theme-or-config, typography)) {
    @return map.get($theme-or-config, typography);
  }
  @return $default;
}

然而，根据文件中的评论，我应该能够传入我用 define-dark-theme 创建的 $wb-theme 并获得排版配置回来。由于我没有专门创建一个排版，我假设我会得到一个默认的排版，但没有，我没有得到任何东西。

但是，它确实声明默认情况下并未排除排版。因此，我尝试创建一个默认版式，但我绝对无法找到如何将此版式添加到我的主题中，以便稍后再次提取它。 define-dark-theme 函数不包含排版参数，但只允许传递三种调色板。

@angular_theming.scss:

@function define-dark-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) { ... }

我试图只创建默认排版并将其放入 mat.core 函数中，希望这可以将其设置在变量中的某处(默认值或其他东西，也许？)，主题然后创建访问但不，这没有做任何事情；我的主题仍然没有排版。我尝试在调用 define-dark-theme 和 all-component-themes 之前和之后进行设置，但无济于事。

主题.scss:

$wb-typography-config: mat.define-typography-config();
@include mat.core($wb-typography-config);
    
$wb-theme: mat.define-dark-theme(...);
@include mat.all-component-themes($wb-theme);
@include reboot.theme($wb-theme);

或

$wb-theme: mat.define-dark-theme(...);
$wb-typography-config: mat.define-typography-config();

@include mat.all-component-themes($wb-theme);
@include mat.core($wb-typography-config);
@include reboot.theme($wb-theme);

无论是谷歌还是任何排版指南都没有任何帮助，因为它们都没有真正在主题中设置排版，但 Material 功能在我面前尖叫着说是的，那个该死的主题应该有一个排版。那么这里发生了什么？如何在我的主题中加入排版，以便 get-typography-config($theme) 实际上返回排版配置？我是不是陷入了过时的想法，整个功能都不再使用了？那么我将如何做到这一点，我必须设置和访问什么？不过，我更喜欢在我的主题中使用排版。

Answer 1

您只需要在创建主题 map 时将排版配置添加到主题 map 中即可。

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