如何在 Angular Material 的自定义主题中设置背景调色板？

Question

我目前定义了一个自定义主题，如下所示：

$my-material-theme: mat.define-light-theme((
    color: (
      primary: $my-material-primary,
      accent: $my-material-accent,
      warn: $my-material-warn,
    ),
    typography: $my-material-font
));


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

一切正常。尽管如此，经过一些研究，我仍然注意到某些组件使用的背景颜色与我在应用程序上使用的背景颜色不同，尽管以下内容将进一步自定义主题：

$my-material-theme: mat.define-light-theme((
    color: (
      primary: $my-material-primary,
      accent: $my-material-accent,
      warn: $my-material-warn,
      background: $my-material-background
    ),
    typography: $my-material-font
));


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

，显然我定义了新的背景调色板。经过测试后，我发现它不起作用，因为 mat.define-light-theme 似乎在内部删除了背景键，而是使用内部键。我对 Sass 或材料不太熟悉，我希望能够使用当前版本的 Angular Material 定义背景键，对我的代码引入最少的更改。提前致谢。

Answer 1

我刚刚遇到了同样的问题。据我所知，所使用的背景是内部生成的，正如您所说。我发现覆盖它的唯一方法是在返回的 $my-material-theme 映射中设置值。

使用地图设置/获取函数非常难看，但是通过类似的方法，您可以覆盖背景值，在本例中为“red”：

$backgroundColor: red;
$color: map.get($my-material-theme, "color");
$colorBackground: map.get($color, "background");
$colorBackground: map.set($colorBackground, "background", 
$backgroundColor);
$color: map.set($color, "background", $colorBackground);
$my-material-theme: map.set($my-material-theme, "color", $color);

然后您可以像以前一样使用修改后的 $my-material-theme ：

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