用来自 api 的新类覆盖现有的 css 类 [重复]答案

【问题标题】：Override existing css classes with new classes from api [duplicate]用来自 api 的新类覆盖现有的 css 类 [重复]
【发布时间】：2020-08-18 10:15:35
【问题描述】：

我有一个特殊的场景，我需要覆盖我在 Angular 组件的 scss 文件中定义的现有类。根据场景，我将从 api 中获得不同的样式。这些样式将具有具有更新样式的该组件的类名。我需要更新该组件并覆盖现有样式。我不能为此使用 ngclass 或 ngstyle，因为我将获得组件中所有类的字符串以及一些更新的样式。这对于一个组件来说是唯一的，即每个组件都应该覆盖其单独样式表中定义的现有样式。我如何覆盖组件的整个单独样式。？？提前致谢。

【问题讨论】：

将封装更改为None 会不会太痛苦？然后，您可以以全局方式覆盖您想要的样式。
@julianobrasil 我不想以全局方式覆盖，我想覆盖每个组件。
您可以将 scss 类“.initial-styles”添加到 .scss 中的所有样式（这只是所有文件的一行），当您从 API 获取样式时，删除初始-组件中的样式类，并通过 Renderer API 在此组件上应用您的 API 样式，有意义吗？
会有帮助吗？ stackoverflow.com/questions/61503525/…
那么我宁愿将您的问题作为重复项关闭。

标签： css angular typescript sass scss-mixins

【解决方案1】：

两种方法：

1) 将 .initial-styles 类添加到组件中，当您的 API 调用返回时将其取下并应用您的惰性样式。

2) 在您的服务中生成 .css 包，将 .initial-styles 类添加到组件，从您的组件中正确的 .css 资产并删除 .initial-styles 类

解释：

1) Here's a working demo for this first approach.

在 .scss 中添加包含所有其他规则的 .initial 样式规则
当您的 API 返回时执行： this.renderer.removeClass(this.d.nativeElement, "initial-style"); 删除样式。然后通过this.renderer.setStyle(this.d.nativeElement, styleProperty, styleValue); 应用您的新样式
请注意，如果您的 .css API 响应只是这样的字符串：

container-style {color: 'red'} .header-style { color: 'yellow' }

那么你需要做一些解析。 @Ram 建议了这个 https://github.com/angular/angular/issues/36911 建议简化解析。

2) 按照第一种方法添加 .initial-styles 类，在调用 .css 资产时将其取下，然后通过 this.renderer.addClass(this.d.nativeElement, "myclass"); 添加类的名称

【讨论】：