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或唯一的类）。

Answer 2

从ADF 2.3.0开始，大多数组件都关闭了View封装，以简化外部定制。与Angular Material组件类似，大多数ADF组件都具有CSS类名作为其选择器。

例如：

 <adf-login class="adf-login>

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

您可能还需要查看Theming guide。

覆盖Angular2 ADF组件的css

2 个答案: