Element-Plus中按钮点击后移开鼠标仍有背景颜色解决方法

参考官网文档写一点前端页面，发现一个小细节问题，Element-Plus的按钮组件每次点击后都有一个颜色背景，尽管鼠标已经移开：

虽然存在即合理，但是感觉不符合自己的想法，所以打算自己改改。

网上一搜，很多解决方案，其中点击事件加blur失去焦点很多，也有css额外添加方法，不失为一种办法。总之通过查询得知这是因为按钮没有失去焦点，同时焦点状态样式有背景颜色的问题。

我的想法也是直接css覆盖掉不需要的，这样也好一劳永逸，正好参考Element-UI中，按钮点击后移开鼠标颜色仍然聚焦的解决方法（纯css整体解决）_27号白开水的博客-CSDN博客。

通过控制台样式查看：

看不出什么，勾选强制元素状态的:foxus选项，此时的样式列表：

第一个样式就很可疑，鼠标取消掉样式前面的勾，按钮恢复原样，就是它了。

解决

把样式选择的字符串复制下来：

稍作修改，达成鼠标移开但处于焦点时的条件，添加background-color: transparent !important;样式。

因为是想全局修改，所以我在在项目的main.scss（或main.css，这里我用的scss文件而已）文件中添加如下代码：

 .el-button.is-text:not(.is-disabled):focus:not(.el-button.is-text:not(.is-disabled):hover) {
     background-color: transparent !important;
 }

不想全局修改就把这样式改组件下的样式里面就行。

至此问题解决。