我正在尝试一种在Angular6项目中使用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;
}
}
p {
color: 'red'
}
如果有一种方法可以调用任意CSS片段上的角度CSS编译器,使用特定组件的上下文?
或者另一种方法来实现我上面所描述的?
注意:我知道我可以将内联样式绑定并应用于元素,但这不符合我的要求-特别是您不能使用此机制以伪选择器为目标,或执行媒体查询等。
我可以通过完全不使用scss文件和通过jss机制定义所有默认样式来解决这个问题,但是我希望保留使用普通样式系统的能力,这样jss只在需要的地方使用。另外,我认为在使用jss设计第三方组件的样式时,我仍然会遇到选择性问题。