使用Mixin应用角度材料替代主题

问题描述

我有一个使用Angular Material Components的大型Angular 10应用程序。我创建了一个替代主题，将3调色板扩展到6。目前，如果我将父选择器放在子代周围，则替代主题可以正常工作选择器，并将替代主题类应用于父级，如下所示：

<div class="alt-theme">
<mat-icon color="primary">home</mat-icon>
</div>

但是，这不适用于我正在使用的某些UI。对于主要的3种颜色，我设置了一个custom-theme.scss文件，在其中创建了混合。我的主要三种颜色的混合效果很好。我需要找到一种方法来创建混入以应用替代主题颜色，而不必在子选择器周围添加父选择器。我尝试过：

.alternate-theme {
  @mixin alternate-theme($alternate-theme) {
    $primary: map-get($alternate-theme,primary);
    $accent: map-get($alternate-theme,accent);
    $warn: map-get($alternate-theme,warn);
    $foreground: map-get($main-theme,foreground);
    $background: map-get($main-theme,background);

    .mat-icon.home {
      color: mat-color($accent) !important;
    }
  }
}

这并没有改变图标的​​颜色。

是否有一种使用与上述类似的mixin应用替代主题的方法？我已经在互联网上进行搜索，但是似乎找不到有关使用Mixins为Material主题添加其他颜色的信息。

在此先感谢您提供的任何信息！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）