样式修改: :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 在未来的版本中将被放弃,不知道未来会变成什么样的语法。
:host 表示选择器,选择当前的组件。
::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要修改的className。
不过官方文档上说,ng-deep 在未来的版本中将被放弃,不知道未来会变成什么样的语法。
作者:4f4e62418dff
链接:https://www.jianshu.com/p/f8fddc1ca968
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。