vue中修改第三方组件的样式不生效

问题

在使用element-ui等第三方组件时，有时候想要修改组件内的样式，但不成功

解决方案

第一种

-【方案一】加上一个非scoped样式
根据文档可知，vue可以混用本地和全局样式，因此对子组件的非根元素样式修改，可以单独放在一个非 scoped 样式中

<style>
 .el-button span{
    background:red;
  }
</style>

<style scoped>
/* 本地样式 */
</style>

• 第二种
  【方案二】采用/deep/
  加上/deep/，组件的样式可以渗透到子组件相应的元素上

<style lang="less" scoped>
.test{
  /deep/ .el-button span{
    background:red;
  }
}
</style>