Jeecg-boot 开发挖坑日记10 升级AntD依赖后按钮组件配色出现异常

昨天项目有新需求用到了,Ant Design Vue 1.5.0+ 的新组件 Descriptions
所以就单独升级了一下UI库依赖,从 v1.3.9 升到了 v1.5.3,然后新组件是可以用了,但是按钮组件出现问题了;
typedanger 时,背景会变成白色,同时文字也是白色的,就会如下图一样的情况。

问题截图

然后审查模式下边看到是有一个样式覆盖了组件库的样式

审查模式下查看到的叠加样式

然后我自己就没有定义过组件库的全局样式,正常我自己覆盖组件库内样式的时候都是私有样式,就郁闷了一个早上,在视图层到处找哪个组件里没有加样式私有化,结果一个上午都没有找到。
然后午休完了之后就突然想起来是不是 Jeecg-boot 自己定义了一个全局样式,在入口文件中引入了,所以导致样式被覆盖了。结果就真的是这个问题。

入口文件内的样式引入截图

第22行引入的 OnlineForm.css中就重定义了 .ant-btn-danger 的背景色为白色,把 AntD 的样式文件在这个之后引入就不会被覆盖了,我大概看了一下,这个样式表中重写了 AntD 的 169 个样式

onlineform.css截图

这个意思就是说,不只是按钮的样式会出现问题,如果其它的样式没有做好覆盖,也会导致显示异常…

有一些还是加了私有作用域,不知道是怎么一个情况…
反正我不用在线报表就先注释了,之后看开发团队会不会修复这个问题吧。

  • 本文所使用的 Jeecg-boot 版本为 v2.1.0
  • v2.2.0 版本也有这个问题,已经提交了 issue 等开发团队回复吧。