如何动态生成CSS类和/或设置其属性

Question

标题不是一个问题，它更像是一个想法，我不知道什么方法最适合我的情况。

那么，问题。我有一些第三方组件具有一些复杂的结构和样式。它的某些部分有一些预定义的CSS类，我可以在周围的组件中用CSS覆盖它。像这样的东西：

我的组件：

<div class="my-cmp-container">
    <some-3rd-party-cmp></some-3rd-party-cmp>
</div>

第三方组件：

<div class="3rd-party-css-class">
    ...
</div>

例如，3rd-party-css-class有样式background-color: #f00，我可以用.my-cmp-container .3rd-party-css-class { background-color: #fff; }等覆盖它。但是。如果我需要动态设置颜色，例如存储在DB中，我就无法在我的班级CSS中预定义每个案例。我只是用十六进制的颜色。

从理论上讲，我可以为some-3rd-party-cmp的每个实例生成唯一的字符串设置为CSS类，并以某种方式在我的组件中生成CSS？我迷失了一点，最好的办法是什么？

编辑：代码示例，以说明情况https://stackblitz.com/edit/angular-kxdatq

Answer 1

你想要做的是this open issue关于Angular中样式表绑定的主题。在该功能可用之前，您可以使用自定义指令获得所需的功能。这是一个指令，用于检索由ng-zorro-antd生成的复选框元素，并为其应用两个颜色属性。这两种颜色是@Input属性，该指令实现了OnChanges，它允许对属性绑定更改做出反应。

@Directive({
  selector: "[nz-checkbox][nz-chk-style]"
})
export class CheckBoxStyleDirective implements OnInit, OnChanges {

  @Input("nz-chk-bkgnd") chkBkgndColor: string;
  @Input("nz-chk-border") chkBorderColor: string;

  private checkbox: HTMLElement;

  constructor(private renderer: Renderer2, private el: ElementRef) { }

  ngOnInit() {
    this.checkbox = this.el.nativeElement.querySelector(".ant-checkbox-inner");
    this.updateBackgroundColor();
    this.updateBorderColor();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.chkBkgndColor) {
      this.updateBackgroundColor();
    }
    if (changes.chkBorderColor) {
      this.updateBorderColor();
    }
  }

  updateBackgroundColor() {
    if (this.checkbox) {
      this.renderer.setStyle(this.checkbox, "background-color", this.chkBkgndColor);
    }
  }

  updateBorderColor() {
    if (this.checkbox) {
      this.renderer.setStyle(this.checkbox, "border-color", this.chkBorderColor);
    }
  }
}

将指令属性选择器nz-chk-style应用于第三方元素后，您可以使用属性绑定设置复选框背景和边框颜色，如下所示：

<span nz-checkbox nz-chk-style [nz-chk-bkgnd]="bkgndColor" [nz-chk-border]="borderColor" >

有关演示，请参阅this interactive stackblitz。

Answer 2

不确定你是否使用Angular但是你已经标记了它，所以我猜你是。

如果你只想改变颜色，而不是只有一个.3rd-party-css-class类，你可以像你这样使用ng-style：

<some-3rd-party-cmp ng-style="{ color: your_color_hex_variable }"></some-3rd-party-cmp>

您还可以定义整个对象（如果样式）并将其传递。

您还可以使用ng-class并传递一个或一组类名，并在组件上另外添加：

<some-3rd-party-cmp ng-class="[cls1, cls2, cls3]"></some-3rd-party-cmp>

<some-3rd-party-cmp ng-class="[3rd-party-css-class, someCondition ? 'another-class-name' : '']"></some-3rd-party-cmp>

在类中，您可以定义要应用的css规则。

使用此解决方案，您可以避免使用额外的包装元素进行样式设计，这是一件好事。

Answer 3

我认为[ngClass]将帮助您动态覆盖css类。有关进一步说明，您可以参考给定的link。

<div 
  [ngClass] = “{
  'CUSTOM_CSS_CLASS': CONDITION
}”></div>

<div 
  [ngClass]="{
   'CUSTOM_CSS_CLASS': CONDITION,
   'OTHER_CLASS': !CONDITION
}"></div>