在项目中修改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%);}
这样就可以看到修改的样式的效果啦!