element修改按钮大小与颜色（vue3 Element Plus按钮点击之后颜色不会还原的解决方案）

思路：Element Plus提供了样式变量    
    
    
 ，我的解决思路就是修改其样式变量    
    
    
 。

新建外部样式 xxx.css

加入内容：

.el-button--primary { --el-button-bg-color: #409eff; --el-button-hover-bg-color: #409eff;}.el-button--primary:hover { --el-button-hover-bg-color: #79bbff;} .el-button--warning.is-plain { --el-button-bg-color: #fdf6ec; --el-button-hover-text-color: #e6a23c; --el-button-hover-bg-color: #fdf6ec;}.el-button--warning.is-plain:hover { --el-button-hover-text-color: #fff; --el-button-hover-bg-color: #e6a23c;} .el-button--danger.is-plain { --el-button-bg-color: #fef0f0; --el-button-hover-text-color: #f56c6c; --el-button-hover-bg-color: #fef0f0;}.el-button--danger.is-plain:hover { --el-button-hover-text-color: #fff; --el-button-hover-bg-color: #f56c6c;} 然后将xxx.css 引入到页面中 


     


     


     。注：不知道怎么滴 


     


     


     ，全局引入页面的按钮不起作用

 




 




 




，需要的单个页面中引入

 




 




 




。以上内容只修改部分按钮的点击效果   

   

   

，如需修改多个按钮  

     

     

     ，依次添加   

   

   

。 如有更好的解决思路和方案欢迎回复, 如有更好的解决思路和方案欢迎回复, 如有更好的解决思路和方案欢迎回复 如有更好的解决思路和方案欢迎回复,