在我的 component.scss 文件中,我有 mixin 变量,我正在尝试为 div 元素设置波纹颜色。
如果我在 HTML 中设置直接颜色值,例如:[matRippleColor]="red",则波纹颜色已应用并正常工作。
但是,如果我将mixin 变量的名称或scss 类名称赋予 [matRipplecolor],则不会应用波纹颜色。
component.scss飞
@import '~@angular/material/theming';
@mixin dashboard-component-theme($bg-ripple) {
.rippleCOLOR {
background-color: $bg-ripple;
color: $bg-ripple;
}
}
component.html飞
<!-- WORKING: Direct Color value -->
<div matRipple [matRippleColor]="red"> Some text </div>
<!-- NOT WORKING: mixin variable -->
<div matRipple [matRippleColor]="$bg-ripple"> Some text </div>
<!-- NOT WORKING: scss class name -->
<div matRipple [matRippleColor]="rippleCOLOR"> Some text </div>
需要从 scss 文件中的 mixin 变量设置波纹颜色