时间戳

首页 > 解决方案 > 导入时更改角度库的主题

javascript - 导入时更改角度库的主题

问题描述

我正在尝试做一些具体的事情，但找不到任何关于它的信息。我想做的是用我的样式组件（大小，字体，..）制作一个通用的角度库，然后在 2 个不同的项目中导入这个库，到目前为止一切都很好。

但现在我希望这 2 个项目有不同的颜色/字体/图标主题。所以我需要一种在父项目中定义主题的方法，然后将其应用于库组件的样式。

这样，我在库中的所有组件都可以保持不变（单一代码库），并且可以在具有房屋风格的不同应用程序中使用。

有没有办法做到这一点？

亲切的问候，P90K

标签： javascriptcssangularsass

解决方案

创建一个 Angular 库

要创建 Angular 库，您可以按照此处的指南进行操作。您必须将其发布npm并安装在您的项目上。

风格你的图书馆

1.改变风格封装ViewEncapsulation

阅读更多

定义可用于组件的模板和样式封装选项Component。通过使用ViewEncapsulation.None，您将样式暴露给外部组件。

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
...
  encapsulation: ViewEncapsulation.None,
...
})

注意：这有助于覆盖任何组件 CSS，但请务必使用正确的选择器

2.使用:host

阅读更多

host可以帮助覆盖 CSS 而无需触及视图封装。

CSS 伪类函数选择影子 DOM的影子宿主，其中包含它在内部使用的 CSS

父模板中的 Lib

<your-component class="custom-component-cls"></your-component>

父样式中的 Lib 样式

:host{
    ::ng-deep .custom-component-cls{
        color: white;
    }
}

推荐阅读