Angular中如何根据变量为::ng-deep元素条件性应用CSS

实现思路 #

借助你已经绑定到<mt-select>上的bgblue/bgGreen动态类，结合::ng-deep穿透Angular视图封装，就能根据test变量的不同取值，为第三方组件内部的.lmn-select-input元素设置对应背景色。

SCSS代码实现 #

// test为true时，mt-select带bgblue类，修改内部input背景
:host ::ng-deep .bgblue .lmn-select-input {
  background-color: blue;
}

// test为false时，mt-select带bgGreen类，修改内部input背景
:host ::ng-deep .bgGreen .lmn-select-input {
  background-color: green;
}

关键说明 #

• :host 用于限定样式仅作用于当前组件内部，避免污染全局样式
• ::ng-deep 用来突破Angular的视图封装规则，访问<mt-select>组件内部的.lmn-select-input元素
• 无需额外修改TS代码，你的HTML已经通过[ngClass]="test ? 'bgblue' : 'bgGreen'"完成了动态类的绑定，SCSS直接基于这些类区分状态即可

内容的提问来源于stack exchange，提问作者Urvashi