Electron桌面应用实战：Element UI 导航栏橙色轮廓之谜与Bootstrap样式冲突解决方案

目录

引言     

问题现象及排查过程

描述问题 

深入探索

查明原因

解决方案与策略探讨

重写样式

禁用 Bootstrap 样式片段

深度定制 Element UI 组件

隔离样式作用域

结语

引言

        在基于 Electron 开发桌面应用的过程中，我们可能时常遇到各种意想不到的问题。我在使用 Element UI 构建应用程序导航栏时就遭遇了一个看似离奇的现象——未预设的焦点轮廓突然显现！经过一番细致排查，最终揭示了问题的根源并提出了有效的解决方案。

问题现象及排查过程

描述问题 

        在构建一个 Electron 应用时，为了获得良好的用户体验和高效的开发效率，选择了 Element UI 作为界面组件库来实现导航栏功能。然而，在实际测试中，当点击导航栏时，其样式呈现异常，表现为元素被添加了一个橙色的焦点轮廓。

深入探索

        起初，这一现象让我颇为困惑，因为我们的项目并没有设置这个样式，而且该轮廓并未在本地浏览器中出现，是在 Electron 打包运行后才出现的，那么初步猜测是 Electron 这一层引入了什么样式。我们使用浏览器开发者工具来检查样式来源：