Angular：修改第三方组件的样式——ng-zorro等组件默认样式的修改

在项目中修改ng-zorro组件默认样式的一些方法：

• 类名等 前加::ng-deep；
• 类名等 前加：root；
• 类名等 前加:host /deep/；

例如：

页面上左侧有一个菜单栏，使用了ant design中的导航栏组件，其中我们想改变导航选中的默认样式，可以先在控制台查看当前组件的类——

可以看出来，当前组件的被选中时的样式属于.ant-menu-item-selected类，我们可以使用上面的规范在CSS中改写当前组件的样式：

:host ::ng-deep .ant-menu-item-selected {
  background: linear-gradient(180deg, rgba(0, 239, 96, 1) 0%, rgba(0, 155, 171, 1) 100%);
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(0, 239, 96, 1) 0%, rgba(0, 155, 171, 1) 100%);
}

这样就可以看到修改的样式的效果啦！