如何以编程方式向类添加样式 - Angular 2

Question

在我的应用程序中，我使用的是一个未公开其元素的库。 我只能通过它的选择器使用它。

我使用>>>来覆盖其CSS。例如：

>>> .wrapper{ top: 0px !important; width: 400px !important; }

现在我想添加一个新类temp-wrapper，在这个类中我想添加width: 100px !important。

我可以使用classList.add('temp-wrapper')添加它。

但问题是当某些事件发生时，宽度值来自另一个组件。是他们在运行时将某些样式附加到特定类的任何方式。

此外，我使用了ngStyle，但由于我必须在类名前面使用>>>才能覆盖它。

Answer 1

你可以动态创建一个样式元素，放入css definations并添加组件do文档，例如：

var style = document.createElement('style');
style.id = "myStyleId" // so later you can track and update easily
var css = ".temp-wrapper { backdround-color: red; border: 1px solid blue; .......}";
style.innerHTML = css;
document.head.append(style);

如果您不想应用某些内联样式并想要添加一些类和 想要创建类defination dynamicall