Angular Material 工具栏高度调整的官方推荐方案是什么？

合规调整高度的两种实现方式 #

• 使用官方密度主题全局调整
  Angular Material 内置了密度配置体系，专门用于调整全量组件的紧凑程度，完全符合自定义样式规范，不会引发功能异常。你可以在自定义主题的声明代码中调整全局密度值，取值范围为0~-3，数值越低组件越紧凑，设置后工具栏会自动适配对应高度：

$custom-theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn,
  ),
  // 调整为更紧凑的密度，可根据需求修改数值
  density: -2
));

• 使用CSS变量单组件调整
  如果仅需要调整单个工具栏的高度，不需要修改全局样式，可以直接修改mat-toolbar对应的内置CSS变量--mat-toolbar-height，组件内部的内边距、内容对齐逻辑都是基于该变量计算，不会出现布局错乱：

/* 自定义类 */
.compact-toolbar {
  --mat-toolbar-height: 56px;
}

在组件模板中绑定类即可：

<mat-toolbar color="primary" class="compact-toolbar">
  <a class="title" [routerLink]="['']">Azure B2C App1</a>
</mat-toolbar>

关于官方文档使用自定义导航组件的说明 #

Angular Material 提供的mat-toolbar是通用基础组件，需要兼容不同业务场景的通用需求。Angular 官方文档自身的导航栏存在大量定制化特殊逻辑（比如多版本文档切换、全局搜索嵌入、复杂响应式交互规则等），因此基于自身业务需求开发了自定义导航组件，不代表mat-toolbar无法满足常规业务需求。绝大多数场景下，通过官方提供的主题和变量自定义能力，mat-toolbar完全可以实现可用的页头效果，不需要从零开发自定义组件。

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