Vue 深度修改UI组件样式

相信很多小伙伴在日常开发Vue过程中都使用过UI组件库，但是此类UI组件库都会有一定的局限性，比如无法自定义层级、样式等，因为毕竟是别人封装好的组件，但是我们自己也可以修改。

<style scoped>
  .barbox >>> .el-menu {
    background-color: #6a4318;
    color: white;
    left: 23%;
  }
</style

>>>操作符是深度作用选择器，可以更深层都修改css样式，只会作用于css内


如果使用了css预处理器 less/sass...的话>>>则会无法解析，所以为他换了一个别名 /deep/

<style lang="scss" scoped>
  .barbox {
   /deep/ .el-menu {
      background-color: #6a4318;
      color: white;
      left: 23%;
   }
}
</style