vue使用组件样式设置失效

其实这个就是使用vue中的深度选择器

Vue2：>>>、/deep/、::v-deep

这里需要注意一下有些像 Sass 之类的预处理器无法正确解析>>>并且存在一些浏览器兼容性问题,可以使用::v-deep

<!-- 使用::v-deep 推荐使用-->
<style lang="scss" scoped>
  ::v-deep .u-checkbox-label--left.data-v-54acf820{
    background: yellowgreen;
  }
</style>
<!-- 使用>>> 操作符 这个不能在sass里面使用 不推荐使用-->
<style scoped>
>>>.u-checkbox-label--left.data-v-54acf820{
  background: yellowgreen;
}
</style>
<!-- 使用/deep/  不推荐使用-->
<style scoped>
 /deep/.u-checkbox-label--left.data-v-54acf820{
  background: yellowgreen;
}
</style>

 这里是告诉大家这些深度选择器后面放的什么东西（建议自己定义一个类名）

 vue2官方文档对于deep的说明Scoped CSS | Vue Loader

vue3： :deep(el)里面写类名

::v-deep和:deep(el)都支持sass，但是如果在vue3里面使用了::deep那么就会报错。因为::deep已经在vue3里面被弃用了。

<!--使用:deep(<inner-selector>) -->
<style lang="scss" scoped>
  :deep(.u-checkbox-label--left.data-v-54acf820){
    background: yellowgreen;
  }
</style>

由于这里没有太多的介绍/deep/看到这里如果有兴趣的可以看看这两个（这里面有一些使用/deep/一些常见的方式和问题）↓↓↓ 

css关于/deep/的解释和用法_weixin_40442888的博客-CSDN博客_/deep/ css

说一说VUE中的/deep/用法 - 知乎 

sass文件中使用深度选择器 /deep/不起作用_琹箐的博客-CSDN博客_sass深度选择器