ng组件冲突样式修改： :host ::ng-deep

在使用一些第三方的组件的时候，要修改组件的样式。
这种情况下使用:

: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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。