e-icon-picker 样式污染问题

249 阅读1分钟

问题描述:最近使用e-icon-picker实现图标选择器,发现其会污染其他的样式导致每次切换页面的时候按钮和搜索框不自觉的居中,然后再恢复到左边

image.png

image.png

经过排查后发现是是index.css文件内的某个属性选择器的问题

import 'e-icon-picker/lib/index.css' // 基本样式,包含基本图标

问题代码:

[class^=fa] {
  vertical-align: middle;
  text-align: center
}

.el-submenu [class^=fa] {
  margin-right: 5px;
  width: 24px
}

将上述代码修改为

[class^="fa "] {
  vertical-align: middle;
  text-align: center
}

.el-submenu [class^="fa "] {
  margin-right: 5px;
  width: 24px
}

问题解决

排查方法: 由于不擅长前端。故而采用将样式文件格式化后,使用二分法搜索样式文件错误位置,从而进行修改。