如何规范设置Angular Material中的CSS变量（如--mat-standard-button-toggle-height）

一、推荐：基于Angular Material主题系统实现（符合框架设计） #

Angular Material的组件样式基于SCSS主题混合宏（mixin）和调色板构建，集成到主题系统中能保证样式优先级合理，还支持明暗主题切换等场景。

1. 定义自定义调色板与主题

@use '@angular/material' as mat;

// 自定义基础颜色
$color-primary: #你的主色调;
$color-font-light: #你的浅色字体颜色;

// 构建Angular Material标准调色板（也可完全自定义调色板结构）
$custom-primary: mat.define-palette(mat.$indigo-palette, 500, 300, 700);
$custom-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$custom-warn: mat.define-palette(mat.$red-palette);

// 创建完整主题（浅色/深色可选）
$custom-theme: mat.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn,
  ),
  typography: mat.define-typography-config(),
  density: mat.define-density-config(),
));

2. 自定义Button Toggle组件样式
   通过自定义mixin覆盖组件样式，确保和主题系统联动：

// 自定义Button Toggle主题混合宏
@mixin custom-button-toggle-styles($theme) {
  .mat-standard-button-toggle {
    // 自定义高度
    height: 44px;

    // 选中状态样式
    &.mat-button-toggle-checked {
      background-color: $color-primary;
      color: $color-font-light;
    }
  }
}

// 全局应用主题与自定义样式
@include mat.all-component-themes($custom-theme);
@include custom-button-toggle-styles($custom-theme);

二、规范的CSS变量写法（若偏好全局变量方案） #

如果坚持用CSS变量，建议将变量与Angular Material主题关联，避免样式冲突与主题切换失效：

@use '@angular/material' as mat;

$color-primary: #你的主色调;
$color-font-light: #你的浅色字体颜色;

// 定义并应用主题
$custom-primary: mat.define-palette(mat.$indigo-palette, 500);
$custom-theme: mat.define-light-theme((
  color: (primary: $custom-primary)
));
@include mat.all-component-themes($custom-theme);

// 规范定义全局CSS变量，关联主题值保证一致性
:root {
  --mat-custom-primary: #{mat.get-color-from-palette($custom-primary, 500)};
  --mat-custom-font-light: #{$color-font-light};
  
  // Button Toggle专属变量
  --mat-standard-button-toggle-selected-bg: var(--mat-custom-primary);
  --mat-standard-button-toggle-selected-text: var(--mat-custom-font-light);
  --mat-standard-button-toggle-height: 44px;
}

// 在样式中使用变量
.mat-standard-button-toggle {
  height: var(--mat-standard-button-toggle-height);

  &.mat-button-toggle-checked {
    background-color: var(--mat-standard-button-toggle-selected-bg);
    color: var(--mat-standard-button-toggle-selected-text);
  }
}

原写法的问题 #

直接在:root中硬编码变量，未结合Angular Material主题系统：

• 无法随主题切换（如明暗主题）自动更新变量值
• 组件内部样式优先级可能高于全局变量，导致样式不生效
• 缺少主题系统的一致性保障，后续维护成本更高

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