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

最新推荐文章于 2024-07-05 10:22:27 发布

Leviash

最新推荐文章于 2024-07-05 10:22:27 发布

阅读量1.3k

点赞数 25

分类专栏：前端文章标签： electron elementui bootstrap css 前端 chrome chrome devtools

本文链接：https://blog.csdn.net/qq_51588894/article/details/135340297

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

引言

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

问题现象及排查过程

描述问题

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

深入探索

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

发现一段关于 :focus 的 CSS 代码：

:focus {
    outline: -webkit-focus-ring-color auto 1px;
    outline-color: -webkit-focus-ring-color;
    outline-style: auto;
    outline-width: 1px;
}

进一步分析表明，当 Element UI 的导航栏被点击时，它内部调用了 focus 属性，并设置了 -webkit-focus-ring-color 作为轮廓颜色。

查明原因

可是这个 focus 属性是怎么来的呢？

经过对项目依赖关系的深入审查以及查阅论坛经验，最终揭示了一个有趣的事实：Element UI 在某些情况下其实“暗地里”使用了 Bootstrap 的部分样式规则。

原来Element UI 在处理某些组件（如导航栏）的焦点状态时，为保证兼容性或默认样式效果，悄无声息地引用了 Bootstrap 中的部分样式规则，其中就包括上述关于 :focus 样式设置中的 -webkit-focus-ring-color 属性。