如何覆盖 Angular Material 15 中垫子按钮的对比度

Question

我想要一个带有白色文本和轻微悬停的浅橙色按钮。我使用对比度设置创建了自定义调色板，不幸的是我的按钮中仍然有黑色文本以及黑色悬停和波纹：/

似乎 Angular 材质具有某种对比度检测功能，它决定使用什么文本颜色，如何覆盖它？

@use '@angular/material' as mat;

@include mat.core();

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;

$custom-amber-palette: (
  50: #fff8e1,
  100: #ffecb3,
  200: #ffe082,
  300: #ffd54f,
  400: #ffca28,
  500: #ffc107,
  600: #ffb300,
  700: #ffa000,
  800: #ff8f00,
  900: #ff6f00,
  A100: #ffe57f,
  A200: #ffd740,
  A400: #ffc400,
  A700: #ffab00,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  ),
);

$my-primary: mat.define-palette($custom-amber-palette, 700);
$my-accent: mat.define-palette(mat.$grey-palette, 900);

$my-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-primary,
      accent: $my-accent,
    ),
    typography: mat.define-typography-config(),
    density: 0,
  )
);

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

Answer 1

不幸的是，这看起来像是 Angular 15 中的一个bug。

Answer 2

自 Angular 17 起，该问题仍然存在。 目前有两种解决方案：

1. 使用此存储库：https://github.com/Plabbee/angular-material-contrast-fix直到谷歌修复它
2. 等到17.3.3或以上从官方角度/材料修复