覆蓋Angular2 ADF組件的css

我正在使用Angular2和Alfresco應用程序開發框架（ADF 1.7.0），並希望減少文檔列表組件的行高。我不完全確定如何覆蓋此組件的CSS屬性。覆蓋Angular2 ADF組件的css

我已經試過的是將AppComponent的ecapsulation設置爲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]來覆蓋文檔列表組件的默認屬性？

感謝您的任何建議。

來源

2017-08-07 CMatheis

您應該使用':: ng-deep'，如[本博文]（https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700）中所述，因爲'/ ng-深/不贊成。如果你的css [具體]（https://developer.mozilla.org/en/docs/Web/CSS/Specificity）足夠，你就不需要'[_ngcontent-c9]'。（如果它不嘗試使用ID或獨特的類）。如果你可以創建一個[plunker示例]（https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5），這將很難創建一個沒有[mcve]的解決方案，這真的會有所幫助 – 0mpurdy

解決方案是使用更多特定的選擇器，謝謝@ 0mpurdy！ – CMatheis

您應該使用::ng-deep，如this blog post中所述，因爲/ deep /已被棄用。

如果您的css爲specific就不需要[_ngcontent-c9]。（如果不是，請嘗試使用ID或唯一類）。

來源

2017-08-07 13:36:26 0mpurdy

覆蓋Angular2 ADF組件的css

回答

相關問題