如何解决使用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 举报,一经查实,本站将立刻删除。