在使用一些第三方的元件的時候，要修改元件的樣式。
這種情況下使用:

:host ::ng-deep .className{
    新的樣式......
}

這樣的方式就可以方便的修改樣式了。

比如領導嫌nz-timeline元件垂直距離太大，希望整個介面緊湊一點。我們就可以在使用了該元件的的元件中引入這樣的CSS程式碼：

//修改ant-timeline-item之間的間距
:host ::ng-deep .ant-timeline-item{
  padding: 0 0 8px;
}
//修改最後一個item與底部的間距。
:host ::ng-deep .ant-timeline-item-last .ant-timeline-item-content{
  min-height: 10px;
  /* margin-bottom: -30px; */
}
 

這樣整個介面就短小精悍了許多。
:host 表示選擇器，選擇當前的元件。
::ng-deep 可以忽略中間className的巢狀層級關係。直接找到你要修改的className。
不過官方文件上說，ng-deep 在未來的版本中將被放棄，不知道未來會變成什麼樣的語法。使用的時候，記得為未來Angular升級帶來的變化做準備。

作者：4f4e62418dff
連結：https://www.jianshu.com/p/f8fddc1ca968
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。