vue style scoped修改外部样式

问题描述

使用vue的开发者肯定都会遇到一个问题,在局部style scoped中修改样式影响不了第三方的ui库样式

解决方式

第一种：直接去掉scoped，这样做会改变全局样式，所以可以在样式的前面，加上一个特定作用的类，例子如下所示

****search_home就是我在本页面特有的样式
 .serach_home .el-button {
     border-radius: 0 4px 4px 0;
  }

第二种：使用官方文档的描述

官方文档地址如下：https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A0%B9%E5%85%83%E7%B4%A0

深度作用

***在页面中使用el-button-edited就可以重写样式了
 .el-button-edited >>> .el-button {
     border-radius: 0 4px 4px 0;
  }