Angular 15 個主題被 MDC 組件覆蓋

Question

一直在遵循 Angular 關於主題的材料指南，這使我進行了以下設置（忽略 $mx-* 調色板，這些調色板具有 50..900 級別的正確值以及對比度）：

@use '@angular/material' as mat;
@use 'sass:map';
@use 'core' as core;

$primary-palette: mat.define-palette(core.$mx-green-palette);

$light-theme: mat.define-light-theme((
  color: (
    primary: $primary-palette,
    accent: $primary-palette,
    warn: mat.define-palette(mat.$deep-orange-palette),
  ),
  typography: core.$mx-typography,
  density: -1
));

/*Rewrite the background and foreground palettes*/
$light-theme: map.set(
    $light-theme,
    color,
    background,
    core.$mx-light-theme-background-palette
);

$light-theme: map.set(
    $light-theme,
    color,
    foreground,
    core.$mx-light-theme-foreground-palette
);

@include mat.core();
@include mat.all-component-themes($light-theme);
@include mat.all-component-typographies($light-theme);

這在一些組件中被成功地忽略了，因為我的設置對 mdc-theme 沒有影響：

在深入了解包含mat.all-component-themes時發揮作用的 mixins 之后，我意識到默認的 MDC colors 被賦予了優先權：

黑色始終用作文本顏色。

我是否應該另外覆蓋mdc-theme-color中的每個 colors / 這些應該如何與我的 mat 主題中的 50...900 個調色板對齊？ 非常歡迎任何指導！

Answer 1

通過檢查select 組件的示例頁面，我發現使用預建主題（在本例中為紫色-綠色），您可以覆蓋我們無法使用自己的主題覆蓋自己的樣式：

我在他們的 repo 中打開了一個問題並尋求幫助，如果你想幫助這個問題獲得可見性： https://github.com/angular/components/issues/26544