覆盖 Angular2 ADF 组件的 css

Question

我将 Angular2 与 Alfresco 应用程序开发框架 (ADF 1.7.0) 一起使用，并希望降低文档列表组件的行高。我不完全确定如何覆盖此组件的 CSS 属性。

我已经尝试过的是将AppComponent的封装设置为encapsulation: ViewEncapsulation.Emulated。然后我将下面的 CSS 添加到 app.component.css

:host /deep/ .adf-data-table[_ngcontent-c9] tbody[_ngcontent-c9] tr[_ngcontent-c9] {
    height: 36px;
}

:host /deep/ .adf-data-table[_ngcontent-c9] td[_ngcontent-c9] {
    padding-top: 6px;
    padding-bottom: 6px;
    height: 36px;
}

我在浏览器控制台中找到了选择器 .adf-data-table[_ngcontent-c9] tbody[_ngcontent-c9] tr[_ngcontent-c9]。问题是 [_ngcontent-c9] 可以更改，然后我的更改不再适用。

我也试过这个选择器：.adf-data-table tbody tr 但是我的更改不会覆盖默认属性。

如何在不在选择器中显式使用 [_ngcontent-c9] 的情况下覆盖文档列表组件的默认属性？

感谢任何建议。

Answer 1

您可能应该按照 this blog post 中的描述使用 ::ng-deep，因为 /deep/ 已被弃用。

如果您的 css 足够 specific，则您不需要 [_ngcontent-c9]。（如果不是，请尝试使用 ID 或唯一 class）。

Answer 2

从 ADF 2.3.0 开始，大多数组件都关闭了视图封装以简化外部定制。与 Angular Material 组件类似，大多数 ADF 组件都有 CSS class 名称作为它们的选择器。

例如：

 <adf-login class="adf-login>

因此您可以根据组件选择器或组件 class 名称创建样式。

您可能还想看看 Theming guide。

覆盖 Angular2 ADF 组件的 css

Override css of Angular2 ADF component

css

components

overriding

alfresco

angular