时间戳

首页 > 解决方案 > 重置第三方库中使用的 Angular 组件的样式

css - 重置第三方库中使用的 Angular 组件的样式

问题描述

语境

我正在使用一个提供用户界面组件的 Angular 库（为了示例，我们假设它是Angular Material Library）。

组件的功能（逻辑、API 等）完全符合我的需求，但我想应用我自己的样式，例如通过提供应用不同样式的全局 CSS 样式。以 Angular Material 的按钮组件为例，这可以通过将以下代码添加到全局styles.scss-File 中来相当简单地实现：

button[mat-button] {
    color: red;
    // Arbitrary styles ...
}

问题

这迫使我“反对”为特定组件定义的样式。我想重置来自库的所有（特定于组件的）样式。否则，我将不得不使用大量unset偶尔的!important语句来手动重置/覆盖先前定义的样式。

问题

有没有办法正确重置 Angular 组件的样式？例如，通过阻止 Angular 将这些样式一起写入<style>-Tag？

为了完整起见（以及对于将来遇到这个问题的读者），我觉得重要的是要注意我所要求的不是做事的“角度方式”：组件应该自己运行，理想情况下是你把它当作一个黑盒子——重新设计一些东西不符合那个范式。在我正在研究的特定情况下，权衡似乎证明了这种行动方案的合理性。

标签： cssangularreset

解决方案

推荐阅读