如何为Angular Material项目全局设置letter-spacing？

不需要逐个组件修改，以下是几种全局处理方案： #

1. 批量覆盖MDC text-tracking CSS变量 #

Angular Material 15+基于MDC（Material Design Components）构建，大部分组件的字母间距由带text-tracking后缀的CSS变量控制。你可以在全局styles.scss中批量设置这些变量，避免逐个组件添加：

html {
  // 覆盖所有已发现的MDC文本跟踪变量
  --mdc-list-list-item-label-text-tracking: normal;
  --mdc-text-button-label-text-tracking: normal;
  --mdc-filled-text-field-label-text-tracking: normal;
  // 后续找到其他text-tracking变量，直接追加到这里即可
}

如果想更高效，也可以通过属性选择器给所有MDC组件统一设置：

[class^="mdc-"], [class*=" mdc-"] {
  --mdc-list-list-item-label-text-tracking: normal;
  --mdc-text-button-label-text-tracking: normal;
  --mdc-filled-text-field-label-text-tracking: normal;
}

2. 全局强制设置letter-spacing #

如果上述变量覆盖不生效，可以直接给文本元素强制设置letter-spacing，用!important确保优先级（仅应急使用，优先用变量覆盖）：

// 针对常见文本元素和Material组件设置
body,
p,
h1, h2, h3, h4, h5, h6,
.mat-button, .mdc-button,
.mat-list-item,
.mdc-text-field,
.mat-form-field-label {
  letter-spacing: normal !important;
}

若想覆盖所有元素（需注意可能影响特殊样式）：

* {
  letter-spacing: normal !important;
}

3. 通过Angular Material主题配置全局调整（推荐） #

符合Material设计规范的方式是在主题文件中配置全局排版，统一设置字母间距：

@use '@angular/material' as mat;

// 定义自定义主题
$custom-theme: mat.define-theme(
  (
    typography: mat.define-typography-config(
      // 给所有文本变体设置letter-spacing为normal
      all-variants: (
        letter-spacing: normal
      ),
      // 也可单独针对特定组件变体设置
      button: (letter-spacing: normal),
      input: (letter-spacing: normal),
      list-item: (letter-spacing: normal)
    )
  )
);

// 应用主题
@include mat.all-component-themes($custom-theme);

注意事项 #

• 先测试全局方案，若出现个别组件样式异常，再针对性调整选择器或变量。
• Angular 14→15的核心变化是组件从Legacy切换到MDC架构，所以样式变量前缀从mat-改为mdc-，优先覆盖mdc-前缀的变量更适配新版本。

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