如何在Angular 6中动态编译组件样式

Question

我正在尝试一种在angular 6项目中使用jss的方法，以实现组件的动态样式。

我遇到的问题是动态样式总是比预定义样式具体，因为动态样式缺少视图封装系统中的属性选择器。

我可以轻松地从jss中获取原始CSS输出，但是我还没有找到一种方法可以通过角度编译器来运行它，以使选择器修改为包括属性选择器。

理想情况下，我希望能够将模板中的<style>标记绑定到组件的cssText属性，但这似乎是不可能的。

import {Component, OnInit} from '@angular/core';
import * as color from 'color';
import jss from 'jss';

@Component({
  selector: 'app-example',
  template: `
    <p [ngClass]="cssClasses">TEST TEST</p>
  `,
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit {
  cssClasses: { [name: string]: boolean } = {};

  constructor() {
  }

  ngOnInit() {
    const {classes} = jss.createStyleSheet({
      dynamicClass: {
        color: color('blue').hex(),
      }
    }).attach();

    this.cssClasses[classes.dynamicClass] = true;
  }

}

example.component.scss

p {
    color: 'red'
}

是否有一种方法可以在特定组件的上下文中在任意CSS上调用有角CSS编译器？

还是实现上述我所描述的另一种方式？

注意：我知道我可以将内联样式绑定并应用到元素，但这不符合我的要求-特别是您不能使用该机制定位伪选择器或进行媒体查询等。

我也许可以通过根本不使用scss文件并通过jss机制定义所有默认样式来解决此问题，但是我希望保留使用常规样式系统的功能，以便仅在需要的地方使用jss。另外，我认为使用jss样式化第三方组件时，仍然会遇到选择性问题。