代码之家  ›  专栏  ›  技术社区  ›  Michael

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

  •  2
  • Michael  · 技术社区  · 6 年前

    我正在尝试一种在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'
    }
    

    result

    如果有一种方法可以调用任意CSS片段上的角度CSS编译器,使用特定组件的上下文?

    或者另一种方法来实现我上面所描述的?

    注意:我知道我可以将内联样式绑定并应用于元素,但这不符合我的要求-特别是您不能使用此机制以伪选择器为目标,或执行媒体查询等。

    我可以通过完全不使用scss文件和通过jss机制定义所有默认样式来解决这个问题,但是我希望保留使用普通样式系统的能力,这样jss只在需要的地方使用。另外,我认为在使用jss设计第三方组件的样式时,我仍然会遇到选择性问题。

    0 回复  |  直到 6 年前