Как динамически компилировать стили компонентов в Angular 6

Question

Я пытаюсь найти способ использовать jss в угловом проекте 6 для динамического моделирования компонентов.

Проблема, с которой я сталкиваюсь, заключается в том, что динамические стили всегда менее специфичны, чемпредопределенные стили, потому что в динамических стилях отсутствует селектор атрибутов из системы инкапсуляции представлений.

Я легко могу получить исходный CSS-вывод из jss, но я не смог найти способ выполнить это черезугловой компилятор для изменения селекторов для включения селектора атрибута.

В идеале я хотел бы иметь возможность привязать тег <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;
  }

}

пример.component.scss

p {
    color: 'red'
}

Если есть способ вызова углового компилятора CSS на произвольном фрагменте CSS в контексте контекстаконкретный компонент?

Или другой способ добиться того, что я описываю выше?

Примечание: я знаю, что могу связывать и применять встроенные стили к элементам, но это не соответствуетмои требования - в частности, вы не можете нацеливаться на псевдо-селекторы или выполнять медиа-запросы и т. д., используя этот механизм.

Возможно, я мог бы обойти это, вообще не используя файл scss и определив все стили по умолчанию с помощью механизма jssЯ бы предпочел сохранить возможность использовать обычную систему стилей, чтобы jss использовался только там, где это необходимо.Кроме того, я думаю, что я все еще столкнулся бы с проблемами избирательности при стилизации сторонних компонентов с использованием jss.