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

标签: 前端开发  CSS3

在项目中修改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%);
}

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

版权声明:本文为qq_36451496原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36451496/article/details/103538484